• QQ空间
  • 收藏

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

| 2020-10-18

如何利用Axure制作图片局部开灯交互动效呢?来文中看看~

本期教学由于是用作者本人的自拍照片进行制作教学,所以大家请勿乱传播,以免暴露本人帅的事实,话不多说,教学开始!

首先看看效果:

大家先别往下看,先抓破头皮想想有什么办法可以做出这个效果。算了,我知道大家想不出来,因为大家已经被我帅晕了。

第一步:理清思路

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

第二步:绘制所需元素

首先找一张帅气的自拍

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

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

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

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

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

第三步:制作交互

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

大家看看效果:

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

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

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

第四步:加呼吸灯动效

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

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

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

最终效果:

终于写完了,好累T T,不说了,下期做点简单又帅气的交互。

链接:https://pan.baidu.com/s/1KV2lZm_lkFewybSs2hTF4Q

提取码:t2lm

 

本文由 @索大佩罗娜 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

2021-01-20
图片 今早!数万人相约日照海边!许下今年第一个愿望!附图片、视频……
我们不做信息搬运工,我们是日照微信原创车间! 大众网日照频道 新闻热线:0633-2186677 迎着海面上透出的第一缕阳光 我们送走2018, 迎来201... <详情>
2021-01-20
图片 [广场减肥瘦身舞图片欣赏 教你5种运动小动作大瘦身
5种运动 小动作大瘦身导言:真的下定决心要减肥了吗?在减肥的过程当中,“节食”和“运动” 一直是两个互相补充的部分,缺一不可原文163nvren.com。在开始... <详情>
2021-01-20
图片 韩式新娘妆容图片 自然演绎最美时刻
韩式新娘妆以其以轻薄、自然受到了女性的喜爱,婚礼是一个女性一生中最浪漫的时刻,那么多亲朋好友的见证下当然要有一款最美的妆容,而韩式新娘妆就是你最好的选择... ... <详情>
2021-01-20
图片 美甲图片2016新款式 DIY充满女人味的玫瑰花美甲
【美甲图片2016款式】女人对玫瑰花都没有抵抗力,在指甲上画玫瑰花也很美哦,浓浓的女人味,相信没有人会拒绝!这款美甲稍微有点复杂,所以建议具有美甲基础美甲尝试,... <详情>
2021-01-20
图片 白色阔腿裤怎么搭配上衣图片 清新白让你美上天
裤子白色阔腿裤 小编先来说说,不要说别的颜色了,小编没有其它颜色就只有黑色,特别是春秋冬三季,黑色为主,其它颜色一概没有,不知道有多少人是跟小编一样的,因为黑... <详情>
2021-01-20
图片 美研究员开发新算法打击学术造假 用AI查重论文图片
  有图无真相   在打击学术造假的征途上,学术规范机构又下一城。   来自美国纽约雪城大学(Syracuse University)的机器学习研究员丹尼尔... <详情>