Axure官方正版
快速原型设计工具

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

效果演示

3

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

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

教学重点

1、环形进度条动画

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

静态元素绘制

QQ截图20151220034220

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

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

State3:

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

QQ截图20151220034521

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

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

步骤分解

未标题-1

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

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

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

未标题2

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

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

总结

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

转载请注明出处:Axure中文网 » 一款精美的提交按钮效果制作
axure share

评论 8

评论前必须登录!

 

  1. #5

    点击按钮以后,就把按钮变成一个gif动态图播放不就行了吗?

    john8710106个月前 (07-24)
  2. #4

    扇形图片先用ps画出来,弄成透明图层,可能会更快一些………………QAQ

    Druids_Ringo8个月前 (05-26)
  3. #3

    首先我想知道 扇形环是如何得到的..[生病]

    李洋1年前 (2015-12-23)
    • 在8.0里才有的哦,插入一个矩形,矩形右上会有个圆点○,点一下之后可以选择其他形状。

      Synmo梦儿1年前 (2015-12-23)
  4. #2

    我又回复了

    小苍张翔玲1年前 (2015-12-22)
  5. #1

    你一直懂得很多[哈哈]

    DT1年前 (2015-12-20)

购买Axure RP正版授权 终身可用

购买专业版购买团队版