axure 图片切换图片的交互_Axure RP8 教程：图片局部开灯交互动效

感谢罗罗诺亚索作者分享的【Axure 教程：图片局部开灯交互动效】文章；由于该原型是用 AxureRP9 实现的，因此本文将结合文章实现方法，使用 AxureRP8.0 实现，并升级实现方法，引用全局变量，使原型不被位置限制，可以更灵活的复制应用。在此，感谢罗罗诺亚索作者的分享。

效果如下：

一、界面布局

(1)拉入一张图片 2 作为底图，再拉入一个矩形，命名为黑层，大小与图片宽高一致。填充色为黑色，不透明度为 60%。

(2)复制图片 2，命名为图片 1。从左侧元件库的基本元件中拉入一个矩形，宽高设置为 80*80，从元件库的 Icons 中拉入一个心型矩形，宽高设置为 60*60，两个矩形的填充色都为黑色，不透明度为 60%。选中这两个矩形，运用布尔运算将去顶层，得到空心的矩形。

(3)将【图片 1】和空心矩形【心】选中，右键转为动态面板，命名为灯，宽高为 80*80。双击动态面板【灯】，将【心】移动到(0，0)位置。如下图所示：

静态原型如下：

二、交互实现

1. 拖动事件

选中动态面板【灯】，添加【拖动时】交互事件，元件 》选择 " 当前元件 "，移动为：拖动，动画：无。

注意：为了不让面板【灯】移出黑层边界，需要给界限添加上下左右四个边界，即顶部 大于等于 [ [ LVAR1.top ] ] ，其中 LVAR1 为元件黑层，同理，底部小于等于 [ [ LVAR1.bottom ] ] ，左侧大于等于 [ [ LVAR1.left ] ] ，右侧小于等于 [ [ LVAR1.right ] ] 。

2. 动态面板中图片 1 的移动

按照作者的做法即选择【图片 1】，移动为：绝对位置，X 轴为： [ [ -LVAR1.x ] ] ，Y 轴为： [ [ -LVAR1.y ] ] 。

当原型的位置不是位于(0，0)位置时，会出现下面的异常情况，及图片 1 的位置偏移：

因此，为了使原型的位置不被限制，可以更灵活的应用。本文将引用全局变量，从顶部菜单【项目】》【全局变量】，添加变量 dengX 和 dengY 作为获取动态面板【灯】的位置参数。

选中动态面板【灯】，添加【载入时】，设置全局变量 dengX 等于 [ [ LVAR1.x ] ] ，dengY 等于 [ [ LVAR1.Y ] ] 。其中，LVAR1 为元件 This。

接下来，只需要将元件【图片 1】的拖动交互事件改为，X 轴为： [ [ dengX-LVAR1.x ] ] ，Y 轴为： [ [ dengY-LVAR1.y ] ] 。即需要减去初始的位置。

最终效果如下：

3. 呼吸动效

选中矩形【心】，添加【载入时】，尺寸的大小变化，并控制循环即可。如下图所示：

三、作品链接

提取码：uqx6

作者：火星人～艾斯，公众号：艾斯的 Axure 峡谷

本文由 @火星人～艾斯 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议