返回首页

Axure制作一款精美的提交按钮效果实例教程

时间:2015-12-21 20:21来源:betway必威官网www.etsupport.net 编辑:麦田守望者

效果演示

3

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

需要使用Axure8才可以做出此效果,想学习的记得下载Axure8版本。

教学重点

1、环形进度条动画

2、Axure8多动画同时进行功能的应用

静态元素绘制

 

Axure制作一款精美的提交按钮效果实例教程
 

State1:白色按钮,按钮上有绿色提交文字。

State2:绿色按钮,按钮上有白色提交文字。

State3:

绿色圆环、灰色圆环、中心白色原型、绿色圆(隐藏)是4个同心圆,其中中心白色原型比其他的小一圈,小的这一圈刚好把圆形的边线漏出来。

 

Axure制作一款精美的提交按钮效果实例教程2
 

扇形环1-4为绿色边线,灰色扇形环为灰色边线,均为左上朝向的扇形,之前的中心白色原型就是为了挡住这些扇形的直角边,灰色扇形环是为了挡住其他绿色扇形环,使他们在没有旋转到90度之前得以隐藏。

对勾文字(隐藏),在圆中心。

步骤分解

 

Axure制作一款精美的提交按钮效果实例教程3
 

白色按钮→绿色按钮:按钮状态1<逐渐>变为状态2

按钮文本缩放效果:使用富文本,让文字的大小进行抖动以表示用户点击按钮的效果,给用户反馈。例:字号 50→45→40→50。

按钮变圆:使状态2的长条按钮变为正圆形状,由中心向外扩大。同时<逐渐>将状态2隐藏,将状态3显示。

 

Axure制作一款精美的提交按钮效果实例教程4
 

环形进度条:将扇形环1、2、3、4分别顺时针旋转到90、180、270、360度,需要注意的是后者的时长必须大于前者,并且环形4分为2次专选,第一次旋转到270度,然后将之前用于遮盖绿色扇形换的灰色扇形环进行隐藏,然后再让绿色扇形环4继续旋转到360度。

环形变按钮:<逐渐>显示绿色圆和对勾文字,并隐藏其他无用图形。使绿色圆环从<中心>由圆形变为长条形按钮,同时使绿色圆的尺寸也从<中心>由圆形变为长条形按钮。

总结

这个按钮制作的过程看起来比较复杂,但是实际上是考验观察力的,因为你需要明白从效果A到效果B都需要进行什么改变。Axure本身是不支持使用参数控制环形进度条的,但是我们可以通过遮挡和旋转的方式将这个效果实现,这也是在考察大家头脑是否灵活,是否懂得变通。如果看完教程还是不太明白的话,可以下载RP源文件仔细观察,希望大家多动脑,而不是做一个伸手党

顶一下
(3)
100%
踩一下
(0)
0%
标签(Tag):Axure Axure教程 Axure实例教程
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片