AxureRP8实战手册-案例15（动态面板：元件样式联动）

案例15. 动态面板：元件样式联动

案例来源:

京东-商品列表页

案例效果：

• 初始及鼠标离开时：（图1-115）

• 鼠标移入时：（图1-116）

案例描述：

鼠标进入“对比”/“关注”/“加入购物车”的按钮区域时，图标、文字与背景都呈现另一种样式。其中“关注”按钮中的图标在鼠标进入时，红色心形图标为向上滑动显示，鼠标离开时，向下滑动消失。

元件准备：

• 页面中：（图1-117）

包含命名：

• 图片（用于心形图标）：HeartImage

思路分析：

• 鼠标进入每个按钮区域，改变边框和文字颜色；“对比”按钮的图标也有改变颜色的效果；（操作步骤1）
• 按钮上的文字靠右并距离边框有一定距离；（操作步骤2）
• 鼠标移入图标或者矩形时都能呈现鼠标悬停的效果；（操作步骤3）
• 鼠标进入“关注”按钮时，红心图标向上滑入效果；（操作步骤5）
• 鼠标离开“关注”按钮时，红心图标向下滑出效果；（操作步骤6）

操作步骤：

1、每个按钮矩形的元件属性中设置【鼠标悬停】的交互样式；“对比”按钮中的图标单独设置【鼠标悬停】的交互样式；（图1-118）

2、设置每个按钮矩形的元件样式为文字【右侧对齐】，填充{R}为“4”；（图1-119）

3、矩形与图标同时显示鼠标悬停的效果，可以在动态面板的元件属性中勾选【允许触发鼠标交互】；（图1-120）

4、以上设置完毕后，鼠标移入按钮变换样式时，会发生边框互相遮挡的情况；解决办法是为每个动态面板【鼠标移入时】事件的用例都添加一个动作，这个动作为【置于顶层】，选择元件为“当前元件”。

• 用例动作设置：（图1-121）

5、为“关注”按钮的动态面板的【鼠标移入时】事件添加“用例1”，设置动作为【显示】图片元件“HeartImage”，{动画}为【向上滑动】，动画的持续{时间}为“200”毫秒；

• 用例动作设置：（图1-122）

6、为“关注”按钮的动态面板的【鼠标移出时】事件添加“用例1”，设置动作为【隐藏】图片元件“HeartImage”，{动画}为【向下滑动】，动画的持续{时间}为“200”毫秒；

• 用例动作设置：（图1-123）

• 事件交互设置：（图1-124）