快捷導(dǎo)航

詳解如何在Vue項目中實現(xiàn)累加動畫

更新時間：2023年06月05日 16:51:02 作者：BittersweetYao

這篇文章主要為大家詳細介紹了如何在你的Vue項目中實現(xiàn)累加動畫，文中的示例代碼簡潔易懂，具有一定的參考價值，感興趣的小伙伴可以了解一下

老板新需求

把這里的值做成動畫累加動態(tài)來展示的

首先我們進行分析，這個值肯定是接口傳過來的，我們讓一個count從0開始，設(shè)置一個定時器進行累加，count等于接口傳回的值時，關(guān)閉定時器。那么重點在于這個函數(shù)什么時候調(diào)用，我們必須確保執(zhí)行這個函數(shù)的時候接口是拿到了這個值的

方案：接口調(diào)用完畢的時候調(diào)取這個函數(shù)即可

既然如此，思路也很簡單，只需要拿到接口的值，接口調(diào)用完畢后調(diào)用該動效函數(shù)，這個設(shè)置定時器累加即可，當(dāng)count等于指定值時清除定時器那么我們可以拿到初步代碼：

show(){
let endNum = 1200
let count = 0
let timer = setInterval(() => {
  count ++ 
  if(count > endNum){
    // 避免count大于endNum最終數(shù)字顯示不對
    count = endNum
    // 清空定時器
    clearInterval(timer)
    timer = null
  }
}, 10);
}

我們再來分析，既然要累加，那么萬一這個接口傳回的值是個幾百萬呢?如果頻率不變的話，得加到猴年馬月啊，所以我們需要根據(jù)值的大小來定義步頻，保障能在指定時間內(nèi)完工

方案：時長(time) / 頻率(rate) * 數(shù)字的步長(step)（每 1時間間隔增加的值） = endNum(我們要展示的最終數(shù)據(jù))

show() {
? ? // 最終要顯示的數(shù)字
? ? let endNum = this.dashboard.event_count.total;
? ? // 動畫間隔
? ? let rate = 30;
? ? // 總時長
? ? let time = 2000;
? ? // 步長,數(shù)據(jù)增加間隔
? ? let step = endNum / (time / rate);
? ? // 初始值
? ? let count = 0;
? ? let timer = setInterval(() => {
? ? ? count = count + step;
? ? ? this.dashboard.event_count.total = count.toFixed(0);
? ? ? if (count > endNum) {
? ? ? ? // ?避免count大于endNum最終數(shù)字顯示不對
? ? ? ? count = endNum;
? ? ? ? this.dashboard.event_count.total = count;
? ? ? ? // 清空定時器
? ? ? ? clearInterval(timer);
? ? ? ? timer = null;
? ? ? }
? ? }, rate);
? },

哪里獲取對應(yīng)接口數(shù)據(jù)的就在哪里調(diào)用