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