效果演示
效果分解:白色按钮→绿色按钮→圆环进度条→提交完毕
需要使用Axure8才可以做出此效果,想学习的记得下载Axure8版本。
教学重点
1、环形进度条动画
2、Axure8多动画同时进行功能的应用
静态元素绘制
State1:白色按钮,按钮上有绿色提交文字。
State2:绿色按钮,按钮上有白色提交文字。
State3:
绿色圆环、灰色圆环、中心白色原型、绿色圆(隐藏)是4个同心圆,其中中心白色原型比其他的小一圈,小的这一圈刚好把圆形的边线漏出来。
扇形环1-4为绿色边线,灰色扇形环为灰色边线,均为左上朝向的扇形,之前的中心白色原型就是为了挡住这些扇形的直角边,灰色扇形环是为了挡住其他绿色扇形环,使他们在没有旋转到90度之前得以隐藏。
对勾文字(隐藏),在圆中心。
步骤分解
白色按钮→绿色按钮:按钮状态1<逐渐>变为状态2
按钮文本缩放效果:使用富文本,让文字的大小进行抖动以表示用户点击按钮的效果,给用户反馈。例:字号 50→45→40→50。
按钮变圆:使状态2的长条按钮变为正圆形状,由中心向外扩大。同时<逐渐>将状态2隐藏,将状态3显示。
环形进度条:将扇形环1、2、3、4分别顺时针旋转到90、180、270、360度,需要注意的是后者的时长必须大于前者,并且环形4分为2次专选,第一次旋转到270度,然后将之前用于遮盖绿色扇形换的灰色扇形环进行隐藏,然后再让绿色扇形环4继续旋转到360度。
环形变按钮:<逐渐>显示绿色圆和对勾文字,并隐藏其他无用图形。使绿色圆环从<中心>由圆形变为长条形按钮,同时使绿色圆的尺寸也从<中心>由圆形变为长条形按钮。
总结
这个按钮制作的过程看起来比较复杂,但是实际上是考验观察力的,因为你需要明白从效果A到效果B都需要进行什么改变。Axure本身是不支持使用参数控制环形进度条的,但是我们可以通过遮挡和旋转的方式将这个效果实现,这也是在考察大家头脑是否灵活,是否懂得变通。如果看完教程还是不太明白的话,可以下载RP源文件仔细观察,希望大家多动脑,而不是做一个伸手党。