案例33. 翻转:图片翻转效果
案例来源:
百度文库VIP-首页
案例效果:
- 翻转前:(图3-45)
- 翻转中:(图3-46)
案例描述:
鼠标移入图片时,图片水平向右翻转为另一张图片;鼠标移出图片时,图片向右水平翻转回初始状态。
元件准备:
- 页面中:(图3-47)
- 动态面板的状态“State1”中:以左侧第1个为例。 (图3-48)
- 动态面板的状态“State2”中:以左侧第1个为例。(图3-49)
思路分析:
- 在动态面板的两个状态中,分别放入翻转前与翻转后的图片;(操作步骤1~3)
- 鼠标移入时,翻转到动态面板下一个状态;(操作步骤4)
- 鼠标移出时,翻转回动态面板上一个状态;(操作步骤5)
- 每个动态面板交互完全相同。(操作步骤6)
操作步骤:
1、拖入一个图片元件,导入第一张图片;在图片上点击<鼠标右键>,将其【转换为动态面板】;
2、双击动态面板,点中“State1”后,点击复制按钮;这样就出现了一个包含了同样尺寸图片的“State2”;
3、双击状态名称“State2”,进入状态编辑界面导入翻转后的图片;
4、点中动态面板,为其【鼠标移入时】事件添加“用例1”,并添加动作【设置面板状态】“当前元件”为“Next”,{进入动画}与{退出动画}均为“向右翻转”;
- 用例动作设置:(图3-50)
5、继续为动态面板的【鼠标移出时】事件添加“用例1”,添加动作【设置面板状态】“当前元件”为“Previous”,{进入动画}与{退出动画}同样为“向右翻转”;
- 用例动作设置:(图3-51)
6、完成动态面板的交互后,按下<Ctrl>键的同时拖动动态面板,将其复制为4个,然后逐一修改每个面板状态中的图片。
补充说明:
如果需要为案例中的元件命名,可以在复制完成后进行命名,以免命名重复。