大胆人体艺术

株洲最专业的CAD培训学校 新科20年教学
  • QQ咨询

  • 在线咨询
  • 点击这里给我发消息
  • 点击这里给我发消息
  • 点击这里给我发消息
  • 点击这里给我发消息

大胆人体艺术

免责声明-|:本站作品均来自网友分享或互联网-|,若您发现本站存在您非授权的原创作品请第一时间联系本站删除-|,本站享有代替本站作者维权的权力-|-|。

      
课程搜索:
设为首页 加入收藏

  你现在的位置:首页  >>  新闻动态
axure 翻转:图片翻转效果 株洲UI设计培训班
  来源:新科IT培训学校  发布时间:2017-11-13 16:14:11

案例效果:

  • 翻转前:(图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个,然后逐一修改每个面板状态中的图片。

 

补充说明:

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