效果演示
效果分解：白色按鈕→綠色按鈕→圓環(huán)進(jìn)度條→提交完畢
需要使用Axure8才可以做出此效果，想學(xué)習(xí)的記得下載Axure8版本。
教學(xué)重點(diǎn)
1、環(huán)形進(jìn)度條動(dòng)畫(huà)
2、Axure8多動(dòng)畫(huà)同時(shí)進(jìn)行功能的應(yīng)用
靜態(tài)元素繪制
State1：白色按鈕，按鈕上有綠色提交文字。
State2：綠色按鈕，按鈕上有白色提交文字。
State3：
綠色圓環(huán)、灰色圓環(huán)、中心白色原型、綠色圓（隱藏）是4個(gè)同心圓，其中中心白色原型比其他的小一圈，小的這一圈剛好把圓形的邊線(xiàn)漏出來(lái)。
扇形環(huán)1-4為綠色邊線(xiàn)，灰色扇形環(huán)為灰色邊線(xiàn)，均為左上朝向的扇形，之前的中心白色原型就是為了擋住這些扇形的直角邊，灰色扇形環(huán)是為了擋住其他綠色扇形環(huán)，使他們?cè)跊](méi)有旋轉(zhuǎn)到90度之前得以隱藏。
對(duì)勾文字（隱藏），在圓中心。
步驟分解
白色按鈕→綠色按鈕：按鈕狀態(tài)1<逐漸>變?yōu)闋顟B(tài)2
按鈕文本縮放效果：使用富文本，讓文字的大小進(jìn)行抖動(dòng)以表示用戶(hù)點(diǎn)擊按鈕的效果，給用戶(hù)反饋。例：字號(hào) 50→45→40→50。
按鈕變圓：使?fàn)顟B(tài)2的長(zhǎng)條按鈕變?yōu)檎龍A形狀，由中心向外擴(kuò)大。同時(shí)<逐漸>將狀態(tài)2隱藏，將狀態(tài)3顯示。
環(huán)形進(jìn)度條：將扇形環(huán)1、2、3、4分別順時(shí)針旋轉(zhuǎn)到90、180、270、360度，需要注意的是后者的時(shí)長(zhǎng)必須大于前者，并且環(huán)形4分為2次專(zhuān)選，第一次旋轉(zhuǎn)到270度，然后將之前用于遮蓋綠色扇形換的灰色扇形環(huán)進(jìn)行隱藏，然后再讓綠色扇形環(huán)4繼續(xù)旋轉(zhuǎn)到360度。
環(huán)形變按鈕：<逐漸>顯示綠色圓和對(duì)勾文字，并隱藏其他無(wú)用圖形。使綠色圓環(huán)從<中心>由圓形變?yōu)殚L(zhǎng)條形按鈕，同時(shí)使綠色圓的尺寸也從<中心>由圓形變?yōu)殚L(zhǎng)條形按鈕。
總結(jié)
這個(gè)按鈕制作的過(guò)程看起來(lái)比較復(fù)雜，但是實(shí)際上是考驗(yàn)觀察力的，因?yàn)槟阈枰靼讖男Ч鸄到效果B都需要進(jìn)行什么改變。Axure本身是不支持使用參數(shù)控制環(huán)形進(jìn)度條的，但是我們可以通過(guò)遮擋和旋轉(zhuǎn)的方式將這個(gè)效果實(shí)現(xiàn)，這也是在考察大家頭腦是否靈活，是否懂得變通。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。