美文网首页Axure连载Axure原型设计Axure知识汇总
「连载100篇」AXURE-组件-017-水波效果

「连载100篇」AXURE-组件-017-水波效果

作者: duomi88 | 来源:发表于2019-04-13 18:35 被阅读1次
封面

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”。

定期会将组件整理成完整文件统一发布。

原创文章,转载请标明出处。

感谢阅读

相关文章

网友评论

    本文标题:「连载100篇」AXURE-组件-017-水波效果

    本文链接:https://www.haomeiwen.com/subject/pejrwqtx.html