Axure教程:图片局部开灯交互动效

百万发登入平台

每个人都是产品经理,我想昨天分享

如何使用Axure进行局部照明交互?看一下消息

image.php?url=0MnxCKMp6P

在这个问题上,因为作者使用作者的自画像进行教学,所以请不要传播它,以免暴露出我很帅的事实,更不用说,教学开始了!

首先看效果:

不要先往下看,首先划伤头皮并考虑任何方式来实现这个效果。算了吧,我知道每个人都想不起来,因为每个人都被我晕倒了。

image.php?url=0MnxCKVIF2

这个想法太清楚了,我要谈谈步骤,你更容易理解,所以第一步就是这样跳过

首先找一个帅气的自拍

image.php?url=0MnxCK0R92

然后画一个与照片大小相同的矩形来制作一个面具:黑色,不透明度为40%。

image.php?url=0MnxCKeD0v

画一个120 * 120的矩形,黑色,不透明度40%,然后画一个爱减去。

image.php?url=0MnxCKe3JJ

接下来,命名上面的图形:Heart,创建一个名为:Light的动态面板。将动态面板大小设置为100 * 100,并将动态面板中的“心脏”移动到:( - 10,-10)

image.php?url=0MnxCKvlA9

打开动态面板“灯”,复制一个自拍进来,命名;拿一个自拍2,移动到(0,0)位置。

image.php?url=0MnxCKwTmg

然后回到界面,此时每个人都有一点想法,原型图已准备就绪。

image.php?url=0MnxCKt1Vl

拖动动态面板“灯?笔保贫姘濉暗啤薄?

image.php?url=0MnxCKD9F7

让我们看看效果:

image.php?url=0MnxCK6T0T

我们发现自拍器2与动态面板“灯”一起移动。如果您想在不遵循动态面板“灯光”的情况下移动,根据《相对论》,当动态面板X方向移动时,自拍器2必须在相反方向上移动相同的距离。 Y方向是一样的。

添加动态面板“光”动作,变量LVAR1是动态面板“光”,动态面板“光”坐标的原因是,如果动态面板“光”向右移动10个像素,那么自我-timer 2向左移动10个像素这是自拍器2和照片相对静止的错觉。

image.php?url=0MnxCKMll7

image.php?url=0MnxCKIimZ

看看效果,有没有突然实现:

image.php?url=0MnxCKwTod

旧方法创建一个名为“Control”的新动态面板,并设置两个状态。

设置动态面板“控制”状态更改时,将大小“Heart”设置为100 * 100,动画线性1000ms→等待1000ms→将大小“Heart”设置为120 * 120。

image.php?url=0MnxCKhFzL

加载设置页面时,动态面板“Control”每2000ms循环一次。

image.php?url=0MnxCKSDRz

最终结果:

image.php?url=0MnxCKTfYp

最后写完了,好累T T,不说了,在下一期做一个简单帅气的互动。

提取代码:t2lm

本文最初由