AxureRP8实战手册-案例33（翻转：图片翻转效果）
案例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个，然后逐一修改每个面板状态中的图片。
补充说明：
如果需要为案例中的元件命名，可以在复制完成后进行命名，以免命名重复。
---------------------------------------------------- End ----------------------------------------------------
转载请注明：Axure原创教程网 » AxureRP8实战手册-案例33（翻转：图片翻转效果）
小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！
《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>>