中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

OK，閑話少說，先來看看環形進度條是什么樣的（我猜大家應該都知道）點擊預覽

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

這就是最終要實現的效果，環狀進度條，快速變化的進度數字，是不是蠻有逼格。當然，最重要的是，這完全是由 Axure 8.0 來實現的。But how to do ? 那接下來我就為大家講解這一動效的制作過程。

準備工作：

① 安裝 Axure 8.0（重要）

② Follow me

實現原理：

我一再強調要使用 Axure 8.0，其實是因為 8.0 相比 7.0 版本增加了一些新功能，而這些新功能恰恰是這個實驗中要用到的（形狀運算 and 旋轉動作，也是本案例重點要學習的內容）。

• 形狀運算：來制作出示例圖中深色進度條的形狀；
• 轉轉動作：通過對進度條形狀的旋轉來實現加載的動效。

制作過程：

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

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

③ 實現進度條加載效果。在主頁面添加 OnPageLoad（頁面加載時）事件，當頁面加載時，將形狀 6 順時針旋轉 180°，設置旋轉時間為 2000 ms，這個時候預覽會看到深色進度條從圓環底部中間位置順時針加載出來；然后再將形狀 1 順時針旋轉 180°，設置旋轉時間為2000 ms，這個時候預覽會看到深色的進度條從圓環頂部的中間位置繼續加載，直至加載完成。

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

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

原型下載：

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

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

本文由 @RAEDME大鵬 原創發布于人人都是產品經理。未經許可，禁止轉載。