axure商城

超級簡單的進度條

大家好我是Synmo夢兒,我的教程都是使用Axure8制作的,如果我教程中出現了你找不到的選項,那也許就是版本的原因,特此說明。今天教大家做一個效果棒棒噠并且超級簡單的進度條,包教包會,學不會我打你,效果如下:

進度條

靜態元素構成

  1. 進度條:會增長的矩形條,文中的『bar』指的這個元件;
  2. 進度條邊框:套在進度條外面以表達100%進度條長度的矩形,文中的『 max』指的這個元件;
  3. 進度:由進度數字和百分比2個文本構成,文中的『num』指的數字元件。

動態效果分析

  1. 進度條由空漲到滿,滿時停止;
  2. 數字根據進度條當前進度顯示對應百分比。

進度條動態效果制作

首先,進度條初始狀態應該是空的,所以應該將進度條寬度改為0,但Axure不能為0,最低為1,所以將寬度改為1。

進度條是出現這個進度條時就開始加載的,所以這個交互要做在『載入時』中。

載入時,我們需要通過『設置尺寸』交互來使進度條的寬度發生改變,由1增至進度條邊框的寬度。

p2

錨點選擇左側,因為進度條是由左側開始展開的。動畫選擇線性,時間是你期望進度條由空漲到滿的時間。

為了避免調整進度條寬度造成的返工,所以我們將進度條邊框設置為局部變量,以便獲得進度條邊框的寬度。

設置的時候記得將max添加到局部變量中,否則是不會生效的。

[[max.width]]的含義是,局部變量中的max所定義的這個元件的寬度。

為了便于大家理解,我將max元件的局部變量名字也設置為了max。

至此,進度條動畫完畢了。

數字num百分比動態效果制作

數字需要一直刷新,我們通過不斷顯示和隱藏文字來實現自循環。

num『加載時』

顯示num ? ? //初始時隱藏,加載時顯示,然后才能進入顯示時的交互。

num『顯示時』

設置文本-進度條當前的百分比 ? ??//公式=進度條當前寬度÷進度條邊框寬度

等待0毫秒 ? ? //不加這個的話數字不刷新,不知道為什么,總之加上就對了。

隱藏This

顯示This ? ??//顯示后就會進入顯示時交互,再循環一次此步驟。

百分比顯示詳解

p3

這時顯示的是零點幾幾的百分比,并且后面精細到了小數點后N位,所以我們需要將它乘以100,并且取整。

[[Math.floor(bar.width/max.width*100)]]

看到很多同學在使用函數的時候會在所有變量外面都加上2層中括號,例[[[[bar.width]]/[[max.width]]]]這樣就是錯的!實際上是不需要的,在最外層套上雙層中括號就可以了。

有些同學也許想說,如果我想顯示到小數點后1位的進度怎么辦呢?很簡單,[[Math.floor(bar.width/max.width*1000)]]/10,先乘以1000,取整后再除10就可以了。

這樣顯示的數字就是百分比的數字顯示,再在公式最后面加一個『%』文本就完成啦。

給TA買糖
共{{data.count}}人
人已贊賞
基礎教程

關于MAC版Axure無法漢化和軟件無法打開的解決辦法

2015-12-9 0:31:36

基礎教程

手機垂直劃屏效果從零學起(一)

2016-1-5 18:46:07

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo