今天要說到的數(shù)值加載效果，我們在使用App和網(wǎng)站的時候是經(jīng)常見到的，尤其是金融類的產(chǎn)品、借貸類的產(chǎn)品等。

在我們打開某個頁面，比如我的財富時，賬戶當中的金額會進行不斷往上疊加，直到疊加到賬戶中的金額數(shù)值，就會停止。

具體效果，大家可以從這里看：https://hv8kwg.axshare.com

好，接下看看這個案例時怎么做的

用中繼器和動態(tài)面板制作即可。

我們規(guī)定金額和累加次數(shù)，分別是中繼器數(shù)據(jù)集中的兩列數(shù)據(jù)。

動態(tài)面板加載時開啟循環(huán)，通過結(jié)合判斷來確定每次動態(tài)面板切換狀態(tài)時是否進行累加或者停止累加。累加每次增加的數(shù)字為總額/累加次數(shù)，這樣就比較均勻的累加。

上面是它的基本實現(xiàn)原理。根據(jù)這個原理我們一起來做一下。

一、創(chuàng)建中繼器中元素

中繼器中的元素是矩形-用以顯示數(shù)值；動態(tài)面板-兩個狀態(tài)，用來切換面板狀態(tài)。

二、創(chuàng)建中繼器中數(shù)據(jù)

前面說了，只需兩列。金額和疊加次數(shù)。但這里注意，把中繼器的每項加載時的交互刪除，在這里時沒有用的。

三、設(shè)置動態(tài)面板進行自動循環(huán)切換狀態(tài)

這里循環(huán)間隔的時間設(shè)置得稍微快些。這個時間時每兩次數(shù)值疊加的時間差，如果需要慢些，把這個時間設(shè)置得大些即可，按需設(shè)置。

四、設(shè)置動態(tài)面板的切換面板狀態(tài)時事件。這是重頭戲。

先進行判斷，一是金額進行疊加，這個條件是，當顯示金額的矩形中的文本小于數(shù)據(jù)集中我們設(shè)定的金額時，會進行疊加。金額就是疊加結(jié)束后的金額加上每一次疊加的數(shù)值即可。

因為我的案例里邊金額保留了兩位數(shù)，所以為了保持兩位數(shù)，這里使用了一個tofixed函數(shù)限制了小數(shù)點后的位數(shù)。同樣這也是按需設(shè)置，如果你是整數(shù)的話，直接取整即可。

接下來的一種情況是，金額停止疊加。當展示的數(shù)值與總數(shù)值的差值小于單次疊加的數(shù)值時，說明已經(jīng)不足以再進行疊加了，所以金額就不再往上疊加。

這里的條件大家還可以想一下，有沒有其他的條件設(shè)置方法，留著給大家思考哈哈哈哈。動作就很簡單了，讓金額等于數(shù)據(jù)集中數(shù)據(jù)就行了。

最后，別忘記了，將動態(tài)面板的自動循環(huán)停止了。

大家設(shè)置好之后看看效果如何。動態(tài)面板的狀態(tài)切換在數(shù)值切換的時候可以應(yīng)用，比如電商網(wǎng)站常見的活動倒計時等，有興趣的話大家可以嘗試一下。

總結(jié)

以上是生活随笔為你收集整理的如何让页面停止加载_Axure 案例：数值加载效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。