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

2019年8月2日10:25:11 发表评论 71 views

第一步:理清思路

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

第二步:绘制所需元素

首先找一张帅气的自拍

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

然后画一个和照片一样大小的矩形做蒙版:黑色,不透明度40%。

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

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

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

接下来把上面的图形命名为:心,创建为动态面板命名为:灯。设置动态面板尺寸为100*100,移动“心”在动态面板里的位置为:(-10,-10)

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

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

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

然后回到刚刚的界面,这时候大家有没有有点思路了,原型绘制准备完成。

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

第三步:制作交互

拖动动态面板“灯”时,移动动态面板“灯”。

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

大家看看效果:

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

我们发现自拍2是跟随动态面板“灯”移动的,如果要实现不跟随动态面板“灯”移动,根据《相对论》那么当动态面板X方向移动距离时,自拍2要反方向移动一样的距离,Y方向同理。

添加动态面板“灯”动作,变量LVAR1为动态面板“灯”,取动态面板”灯”坐标的原因是,如果动态面板“灯”向右移动10个像素,那么自拍2向左移动10个像素,这样就照成了自拍2与照片相对静止的错觉。

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

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

看看效果,有没有恍然大悟呢:

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

第四步:加呼吸灯动效

老方法新建一个动态面板,命名“控制”,设置两个状态。

设置动态面板“控制”状态改变时,设置尺寸“心”为100*100,动画线性1000ms→等待1000ms→设置尺寸“心”为120*120。

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

设置页面载入时,动态面板“控制”每隔2000ms循环一次。

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

 

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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: