axure rp8 添加动态面板_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)

特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。

~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程，以独有的教学方法与技巧，帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】

喜欢 (29)or分享 (0)