【转】AxureRP8实战手册-案例15（动态面板：元件样式联动）
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）
特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
