AxureRP8实战手册-案例33(翻转:图片翻转效果)

AxureRP8.0教程 小楼一夜听春语 12468℃ 0评论

案例33. 翻转:图片翻转效果

案例来源:

百度文库VIP-首页

 

案例效果:

  • 翻转前:(图3-45)

3-45

  • 翻转中:(图3-46)

3-46

案例描述:

鼠标移入图片时,图片水平向右翻转为另一张图片;鼠标移出图片时,图片向右水平翻转回初始状态。

 

元件准备:

  • 页面中:(图3-47)

3-47

  • 动态面板的状态“State1”中:以左侧第1个为例。 (图3-48)

3-48

  • 动态面板的状态“State2”中:以左侧第1个为例。(图3-49)

3-49

思路分析:

  • 在动态面板的两个状态中,分别放入翻转前与翻转后的图片;(操作步骤1~3)
  • 鼠标移入时,翻转到动态面板下一个状态;(操作步骤4)
  • 鼠标移出时,翻转回动态面板上一个状态;(操作步骤5)
  • 每个动态面板交互完全相同。(操作步骤6)

 

操作步骤:

1、拖入一个图片元件,导入第一张图片;在图片上点击<鼠标右键>,将其【转换为动态面板】;

2、双击动态面板,点中“State1”后,点击复制按钮;这样就出现了一个包含了同样尺寸图片的“State2”;

3、双击状态名称“State2”,进入状态编辑界面导入翻转后的图片;

4、点中动态面板,为其【鼠标移入时】事件添加“用例1”,并添加动作【设置面板状态】“当前元件”为“Next”,{进入动画}与{退出动画}均为“向右翻转”;

  • 用例动作设置:(图3-50)

3-50

5、继续为动态面板的【鼠标移出时】事件添加“用例1”,添加动作【设置面板状态】“当前元件”为“Previous”,{进入动画}与{退出动画}同样为“向右翻转”;

  • 用例动作设置:(图3-51)

3-51

6、完成动态面板的交互后,按下<Ctrl>键的同时拖动动态面板,将其复制为4个,然后逐一修改每个面板状态中的图片。

 

补充说明:

如果需要为案例中的元件命名,可以在复制完成后进行命名,以免命名重复。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例33(翻转:图片翻转效果)

喜欢 (29)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(9)个小伙伴在吐槽
  1. 缓存的动画效果怎么清除
    小东2016-07-19 14:45 回复
  2. 案例33 效果错误
    小情兽丶2016-07-26 11:08 回复
    • 请使用支持HTML5的浏览器查看原型,IE6~9以及360等国产浏览器可能不能正常显示。
      小楼一夜听春语2016-07-26 11:26 回复
      • 33的案例和书上的不一样。。图片翻转效果是34的案例,33的案例是改变元件尺寸,然后33案例实际效果是和书上一致的。
        硬是没看懂2017-07-14 17:29 回复
  3. 【会有延时bug】 当鼠标快速多次移入移出后,图片会不停的翻转 请问怎么解决?
    长岛没有雪2016-10-10 18:09 回复
    • 别跟原型太较真
      小楼一夜听春语2016-10-11 09:37 回复
  4. 我的用例编辑器里怎么没有向左翻转和向右翻转选项呢?
    红雨2016-10-14 22:48 回复