Axure RP8.0 教程:規模數值遞增動效
本文提供了數值遞增效果的Axure教程,請查收~~
平時我們在瀏覽一些官網首頁時,經??吹较旅孢@樣的數值遞增效果,如下所示:
此教程將為大家講解如何實現此效果:
一、界面元件搭建
首先,從左側的元件庫拉入相應的【文本標簽】,其中的數值和“+”或者“單位”等分別為兩個【文本標簽】,交互事件主要是加給【數值】文字標簽。
調整完樣式和排版后,如下所示:
注意:Axure里面的數字文本標簽為:遞增前的初始值(假設遞增前為1600,那么遞增后為1800)。
二、交互事件實現
選中某一個數值,添加【載入時】交互事件:
加入遞增前,數值為1600,遞增后為1800,即添加事件1:
1. 當文字的值小于1800時,設置文字為:[[This.text+1]],再添加【等待事件】,時間為:5毫秒,最后再添加【觸發事件】,選擇【載入時】事件。
2. 再添加事件2,設置文字,選擇【當前元件】,文本值為:1800。
如下所示:
同理,其他文本標簽的交互事件也是如此,只是條件值的變化。
三、效果展示
教程鏈接
百度云教程源文件:https://pan.baidu.com/s/1EavJ1DZg1mgtOEYtelcD-Q
提取碼: gxkn
作者:火星人~艾斯,公眾號:艾斯的Axure峽谷
本文由 @火星人~艾斯 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
您好,我反復驗證了單獨一個元件增加遞增可以,但是在我交互里面有頁面載入時,這個就不能實現,請問有什么辦法嗎?
大佬你好,帶小數點的顯示異常怎么解決?比如從0自增到9.62,謝謝
謝謝分享,這個學會啦 ??