【原创教程】AXURE-组件-005-SCAN
2019-03-29 本文已影响0人
duomi88
hi,大家好,我是18岁fantasy,本期小组件为一个类似微信二维码的扫描组件,效果如下:
![](https://img.haomeiwen.com/i6332485/7b96bb3b694b80c2.gif)
实现方式
1.图层分析。主要有一个动态面板、外面框(制作过程请看下文)、扫描线条(置于动态面板内)和一个背景组成,具体如下:
![](https://img.haomeiwen.com/i6332485/b2e40a1ece97e5cb.png)
![](https://img.haomeiwen.com/i6332485/23b9deee6d7b5fd5.png)
2.外边框制作。主要用到边框可见性设置,如下所示:
![](https://img.haomeiwen.com/i6332485/933c66f5ac34dc82.png)
制作好一个角之后,其他的角用旋转角度即可获得。
3.添加事件。添加页面载入时触发事件,触发扫描条上下移动(扫描线条初始位置正好低于动态面板高度,正好隐藏,移动时要加上扫描线条高度)。
![](https://img.haomeiwen.com/i6332485/f348ae3dee062af2.png)
以上便是本次小组件的全部内容,喜欢就下载并关注我吧。
原件下载
链接:https://pan.baidu.com/s/1T7khxhRUVR5UlGz5bdNAPQ
提取码:mbv1
~~~
18岁fantasy提示:以上文件完成于axure 8版本。
点击关注"18岁fantasy",定期会将组件整理成完整文件统一发布。
原创内容,转载请注明出处。