Hello大家好，話說Axure RP 8.0 正式版已經(jīng)發(fā)布有一段時(shí)間了，不知道小伙伴們是不是已經(jīng)升級(jí)了呢？不過早在去年中旬 Axure 就發(fā)布了 8.0 的 Beta 版，經(jīng)過了長時(shí)間了產(chǎn)品迭代，今年4月份 8.0 正式版終于和大家見面。本文所述案例必須使用 8.0 版本，7.0 是沒有辦法實(shí)現(xiàn)的，所以你的 7.0 版本該退役啦?。ˋxure 8.0下載地址：http://m.codemsi.com/it/319902.html）

OK，閑話少說，先來看看環(huán)形進(jìn)度條是什么樣的（我猜大家應(yīng)該都知道）點(diǎn)擊預(yù)覽

（原型預(yù)覽地址：http://www.raedme.cn/axurelab/008_downloading/）

這就是最終要實(shí)現(xiàn)的效果，環(huán)狀進(jìn)度條，快速變化的進(jìn)度數(shù)字，是不是蠻有逼格。當(dāng)然，最重要的是，這完全是由 Axure 8.0 來實(shí)現(xiàn)的。But how to do ? 那接下來我就為大家講解這一動(dòng)效的制作過程。

準(zhǔn)備工作：

① 安裝 Axure 8.0（重要）

② Follow me

實(shí)現(xiàn)原理：

我一再強(qiáng)調(diào)要使用 Axure 8.0，其實(shí)是因?yàn)?8.0 相比 7.0 版本增加了一些新功能，而這些新功能恰恰是這個(gè)實(shí)驗(yàn)中要用到的（形狀運(yùn)算 and 旋轉(zhuǎn)動(dòng)作，也是本案例重點(diǎn)要學(xué)習(xí)的內(nèi)容）。

• 形狀運(yùn)算：來制作出示例圖中深色進(jìn)度條的形狀；
• 轉(zhuǎn)轉(zhuǎn)動(dòng)作：通過對(duì)進(jìn)度條形狀的旋轉(zhuǎn)來實(shí)現(xiàn)加載的動(dòng)效。

制作過程：

① 制作所需要的形狀。需要繪制的形狀如下（共 6 個(gè)形狀）：

② 將形狀進(jìn)行有序的排列，3 放在最底層，4 放在最頂層，1、2、5、6 的層級(jí)順序由上往下一次是 5、6、2、1，排列好的效果是這樣的：

③ 實(shí)現(xiàn)進(jìn)度條加載效果。在主頁面添加 OnPageLoad（頁面加載時(shí)）事件，當(dāng)頁面加載時(shí)，將形狀 6 順時(shí)針旋轉(zhuǎn) 180°，設(shè)置旋轉(zhuǎn)時(shí)間為 2000 ms，這個(gè)時(shí)候預(yù)覽會(huì)看到深色進(jìn)度條從圓環(huán)底部中間位置順時(shí)針加載出來；然后再將形狀 1 順時(shí)針旋轉(zhuǎn) 180°，設(shè)置旋轉(zhuǎn)時(shí)間為2000 ms，這個(gè)時(shí)候預(yù)覽會(huì)看到深色的進(jìn)度條從圓環(huán)頂部的中間位置繼續(xù)加載，直至加載完成。

④ 設(shè)置 % 數(shù)字的變化效果，這里用到一個(gè)部件叫 Text（文本框），以及一個(gè)全局變量 OnLoadVariable（系統(tǒng)默認(rèn)的全局變量名稱，可自定義），首先給 OnLoadVariable 設(shè)置一個(gè)默認(rèn)值 0，頁面加載時(shí)，給 Text 部件賦值為 [[OnLoadVariable]]%（實(shí)際為 0%），然后在Text 上設(shè)置 OnTextChange 事件，事件觸發(fā)的動(dòng)作是設(shè)置 OnLoadVariable 的值 +1，然后再將 OnLoadVariable 的值賦給 Text，從而形成一個(gè)循環(huán)，使得 Text 上的值在動(dòng)態(tài)變化（從 0% 遞增到 100%），再從事件上配合好深色進(jìn)度條的旋轉(zhuǎn)事件，就形成了文中示例的效果。

基于以上步驟，原型就基本完成了。另外值得一提的是，要實(shí)現(xiàn)進(jìn)度條加載的效果，還有好幾種方式（不過基本是采用旋轉(zhuǎn)的方式，只是具體實(shí)現(xiàn)起來會(huì)有所不同）；另外還有一點(diǎn)，關(guān)于進(jìn)度條加載和 % 變換時(shí)間匹配的問題，本文采用的方式在不同瀏覽器下預(yù)覽的時(shí)候，會(huì)出現(xiàn)時(shí)間偏差，就是看上去不那么協(xié)調(diào)，可以通過調(diào)整 % 變換的時(shí)間來修正，不過進(jìn)度條和 % 同步的問題應(yīng)該還有其他的實(shí)現(xiàn)方式，小伙伴們可以思考并嘗試一下。

原型下載：

作者提供鏈接: http://pan.baidu.com/s/1bo8gy9T ?密碼: hy5p

人人官方鏈接: http://pan.baidu.com/s/1dFwhwsx 密碼: qfxx

本文由 @RAEDME大鵬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。