Axure9:會動的進度條
怎樣用Axure制作一個會動的進度條,并且進度條上的百分比還能同步變化?這篇文章里,作者便做了分享,一起來看看吧。
今天給大家演示一下如何制作一個會動的進度條,進度條上的百分比也能隨之同步變化。
先看一下最終效果吧~
首先我們需要三個元件,分別為“底框”“進度條”和“展示文字”;
我們將“底框”的長寬設置為“300”“3”,顏色設置為灰色,線段為“0”;
我們將“進度條”的長寬設置為“1”“3”,顏色設置為藍色,線段為“0”;
現在我們在“進度條”上增加交互:
尺寸改變時→啟用情形→選擇[[This.width]]<[[b.width]](注意,這里需要先添加局部變量,將“底框”元件設置為b),具體操作如下圖;
添加動作→等待:設置為50ms(當前進度條增長速度,可以按照需求設置);
添加動作→設置尺寸→選擇【當前元件】→寬設置為[[This.width+1]](寬度每次增加1),高為當前高度為3,錨點設置為左側,具體操作如下圖;
添加動作→設置文本→選擇【展示文字】元件,設置值為[[(This.width/b.width*100).toFixed(0)]]%(這樣文字顯示進度就會和進度條保持一致啦),因為這里也使用了局部變量b,所以不要忘記增加局部變量哦~具體操作如下圖;
新建交互→載入時→設置尺寸:寬設置為[[This.width+1]](寬度每次增加1),高為當前高度為3,具體操作如下圖;
到這就完成我們的所有操作啦~預覽就可以看到想要的效果啦!大家快試一試吧~
本文由 @六元 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
試了很多,終于在你這兒學會了,感謝
哈哈,我也很開心!