Axure教程：制作图片局部开灯交互动效

第一步：理清思路文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

1. 这个思路太清奇了，我直接讲步骤大家比较容易理解
2. 所以第一步就这样跳过了

第二步：绘制所需元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

首先找一张帅气的自拍文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

然后画一个和照片一样大小的矩形做蒙版：黑色，不透明度40%。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

画一个矩形120*120、黑色、不透明度40%，然后画一个爱心减去。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

接下来把上面的图形命名为：心，创建为动态面板命名为：灯。设置动态面板尺寸为100*100，移动“心”在动态面板里的位置为：（-10，-10）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

打开动态面板“灯”，复制一张自拍进来，命名；自拍2，移动到（0，0）位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

然后回到刚刚的界面，这时候大家有没有有点思路了，原型绘制准备完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

第三步：制作交互文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

拖动动态面板“灯”时，移动动态面板“灯”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

大家看看效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

我们发现自拍2是跟随动态面板“灯”移动的，如果要实现不跟随动态面板“灯”移动，根据《相对论》那么当动态面板X方向移动距离时，自拍2要反方向移动一样的距离，Y方向同理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

添加动态面板“灯”动作，变量LVAR1为动态面板“灯”，取动态面板”灯”坐标的原因是，如果动态面板“灯”向右移动10个像素，那么自拍2向左移动10个像素，这样就照成了自拍2与照片相对静止的错觉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

看看效果，有没有恍然大悟呢：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

第四步：加呼吸灯动效文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

老方法新建一个动态面板，命名“控制”，设置两个状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

设置动态面板“控制”状态改变时，设置尺寸“心”为100*100，动画线性1000ms→等待1000ms→设置尺寸“心”为120*120。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

设置页面载入时，动态面板“控制”每隔2000ms循环一次。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/14886.html