当前位置:首页 >  扫码看片

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

发布时间:2020-01-08

感谢罗罗诺亚索作者分享的【Axure教程:图片局部开灯交互动效】文章;由于该原型是用AxureRP9实现的,因┖此本文将结合文章实现方法,使用Axure@RP8.0实现,并升级实现方法,引用全局变量,使原型不被位置限制,可以更灵活的复制应用。在http://www.scq011.vip 此,感▶谢罗⺌罗诺亚索๑ิ.ั๑作者的分享。

┈┉

效果如下:

一、界面布局

(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作为获取动态▎▏面板【微信群 灯】的位置◘参数。

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

接下来,只需要将元件【图片1】的拖动交互事件改为,X轴为:[[de∩ngX-LVAR1.x$]],Y轴为:[[dengY-LVA♀R●1.y]]。即需要减去初始的位置。

最终效果如下:

3. 呼吸动效

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

三、作品链接

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

提取码:uqx6

 

作者:火星人~艾─━斯,公众号:艾斯的Axure峡谷

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

题图来自Un○splash,基于CC0协议