AxureRP8实战手册-案例26（翻转：图片翻转效果）

案例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个，然后逐一修改每个面板状态中的图片。

补充说明：

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