Axure教程:數(shù)據(jù)大屏設(shè)計(jì)之實(shí)時(shí)數(shù)字滾動(dòng)效果
編輯導(dǎo)讀:本文跟大家分享,如何用Axure實(shí)現(xiàn)數(shù)據(jù)大屏實(shí)時(shí)數(shù)字滾動(dòng)效果,作者從預(yù)覽圖,到所需原件,再到操作步驟都一一展開了分析,并對(duì)過程中需要注意的問題進(jìn)行了介紹,希望對(duì)你有所啟發(fā)。
在設(shè)置日常大屏設(shè)計(jì)工作中,我們會(huì)經(jīng)常使用到數(shù)字滾動(dòng)效果,今天符號(hào)教大家?guī)讉€(gè)簡(jiǎn)單的數(shù)字滾動(dòng)效果。
演示效果:
演示地址:https://www.axurebi.com/softs/數(shù)字/#g=1
本教程通過3種方式實(shí)現(xiàn)上面的數(shù)字滾動(dòng)效果。
需要元件:
- 文本
- 中繼器
- 動(dòng)態(tài)面板
第一種:固定區(qū)間數(shù)字隨機(jī)無(wú)限制增加
拉取一個(gè)文本元件,如圖設(shè)置元件數(shù)值,這個(gè)數(shù)字為起始數(shù)字。
設(shè)置元件載入交互,如下圖:
1、設(shè)置等待時(shí)間為50毫秒。時(shí)間越短滾動(dòng)就越快。
2、設(shè)置載入時(shí)的文字:[[LVAR1+(Math.random()*10).toFixed(0)]]??
3、設(shè)置載入循環(huán)觸發(fā)事件這個(gè)很重要能不能循環(huán)動(dòng)起來就看它了。這邊設(shè)置當(dāng)前元件載入時(shí)就行。
4、保存元件交互預(yù)覽看看。
第二種:隨機(jī)增加數(shù)字,設(shè)置最大值
拉取一個(gè)文本元件,如圖設(shè)置元件數(shù)值,這個(gè)數(shù)字為起始數(shù)字。
1、設(shè)置判斷數(shù)值小于10000時(shí),數(shù)字加1。通過元件載入控制效果元件載入交互,如下圖:
2、設(shè)置等待時(shí)間為50毫秒。時(shí)間越短滾動(dòng)就越快。
2、設(shè)置載入時(shí)的文字:[[This.text+1]]
3、設(shè)置載入循環(huán)觸發(fā)事件這個(gè)很重要能不能循環(huán)動(dòng)起來就看它了。這邊設(shè)置當(dāng)前元件載入時(shí)就行。
3、保存元件交互預(yù)覽看看。
第三種:使用中繼器存放隨機(jī)數(shù)字,做滾動(dòng)效果
拉取一個(gè)中繼器元件,一個(gè)動(dòng)態(tài)面板,一個(gè)文本元件,如圖設(shè)置文本元件為0.00。
1、設(shè)置中繼器字段,num,cs。cs為累計(jì)次數(shù)(數(shù)值越大顯示滾動(dòng)時(shí)間越長(zhǎng)),num為計(jì)算數(shù)值。如下圖:
2、設(shè)置中繼器中的動(dòng)態(tài)面板case1交互,如下圖。
設(shè)置中繼器中的動(dòng)態(tài)面板case2,如下圖:
設(shè)置中繼器中的動(dòng)態(tài)面板case3交互。如圖:
3、保存元件交互預(yù)覽看看。
到這就做好三個(gè)不同的數(shù)字滾動(dòng)的效果了,通過本教程希望對(duì)新手朋友有所幫助。謝謝!
本文由 @符號(hào) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
牛的呀,小老板
這個(gè)厲害,就是變動(dòng)的時(shí)候小數(shù)點(diǎn)如何去掉?
方法一的載入循環(huán)觸發(fā)事件在哪里設(shè)置?
添加動(dòng)作-觸發(fā)同頁(yè)事件-當(dāng)前元件-載入時(shí)