axure商城

一款精美的提交按钮效果制作

效果演示

一款精美的提交按钮效果制作

效果分解:白色按钮→绿色按钮→圆环进度条→提交完毕

需要使用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源文件仔细观察,希望大家多动脑,而不是做一个伸手党。

给TA打赏
共{{data.count}}人
人已打赏
案例教程

小红书APP登陆界面划屏效果制作

2015-12-11 0:13:57

案例教程

用Axure写产品需求文档实例

2015-12-22 16:49:42

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索