使用Axure制作图标闪烁效果

axure版本:8.0

实现效果:


原型查看:

https://r0zz4t.axshare.com/#c=2

实现思路:

        通过动态面板可实现图标的闪烁效果。

制作步骤:

1、拖一个您想要制作闪烁效果的图标,比如我这里选择一个圆形。


2、选中该图标,在样式中,调整好效果。我这里去掉圆形的边框,将填充颜色修改为红色。


3、调整好样式后,在该图标上面点击右键,“转换为动态面板”。


4、复制一个状态。


复制完成后,大纲页面变成如下图:


5、思考一下该图标大家的视觉重点在什么地方,以此为中心,调整该图标的大小或颜色,即可实现一个简单的闪烁效果。圆形一般以圆心为中心。比如说我这里,状态1的圆形图标设置直径为30,状态2的图标直径为40。那么最大的一图形直径为宽40高40,那么我将圆心统一为x = 20,y = 20的位置。

6、根据5的计算,双击State1,分别在横轴和纵轴标尺的地方,点住鼠标左键不放拖动,拖出辅助线。分别将x轴和y轴的辅助线拖到20的位置。


7、将该圆形图标的圆心与两辅助线的交叉点对齐。(此时圆形图标的位置为x=5,y=5)


8、双击State2,将圆形图标的大小修改为高40宽40,并将圆心与x=20y=20对齐。此时图标的位置为x=0,y=0


9、选中该动态面板,在属性页卡中,设置“载入时”的事件。


10、添加动作为“设置面板状态”,勾选“当前元件”,将状态设置为“Next”,勾选“向后循环”和“循环间隔”,为循环间隔设置一个值,默认为400毫秒

一个简单的闪烁效果制作完成。当然各位童鞋也可以同时变幻图标的颜色、形状,并添加一些动画让闪烁效果更好看。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容