「连载100篇」AXURE-组件-017-水波效果
2019-04-13 本文已影响1人
duomi88
封面
hi，大家好，我是18岁fantasy，axure组件和实例100篇连载。本期带来一个水波效果，主要作为一个小组件用在我的大屏可视化设计中，主要用到axure的设置大小和透明度等知识点。
组件效果
显示效果
大屏可视化中的效果
应用场景
实现方式
1.图层分析
整个实例由手机外形，4个同心，同大小的圆组成，其中3个圆用于动画效果。
图层分析
图层顺序
2.事件设置
为1,2,3三个圆设置相同的动画效果。具体效果为：
1.载入时，然圆尺寸变大，同时透明度变低，直到0。并且两个效果的时间一样，动画模式都用“线性”。
2.恢复圆的尺寸到初始大小，不设置动画模式，并设置透明度为原始透明度。
3.等待一定时间（如100ms），重新出发当前组件的载入时事件，似的动画效果循环。
如要得到水波效果，需要三个圆载入时时间执行要有间隔，故设置第一个圆立即执行，第二个等待500ms，第三个1000ms。最终得到想要的效果。
事件设置
大屏可视化实现方式
大屏可视化只需要大讲组件复制多份，并且为每份设置不同的颜色效果即可。
大屏可视化
~以上便是本次小组件的全部内容~
原件下载
链接：https://pan.baidu.com/s/1sOaq9CSKIPc3CP60X1J_jw
提取码：ubmx
~~~
18岁提示：以上文件完成于axure 8版本。去微信公账号，关注我的同名名账号“18岁fantasy”。
定期会将组件整理成完整文件统一发布。
原创文章，转载请标明出处。
感谢阅读
