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