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

AxureRP8.0教程 小楼一夜听春语 20390℃ 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 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)个小伙伴在吐槽
  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 回复
    • 头像
      一处时候加个禁用当前原件,让后加个wait-剩下动画时长 ,最后再启用的三个效果。就不会出现不停反转了
      en2019-04-14 15:01 回复
  4. 头像
    我的用例编辑器里怎么没有向左翻转和向右翻转选项呢?
    红雨2016-10-14 22:48 回复
  5. 头像
    木有用哦 我按着一步步来做的 都没用耶
    饭饭2017-10-27 12:15 回复
    • 头像
      再来一次
      vvvivi2018-03-26 16:29 回复