快捷導(dǎo)航

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

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

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

老板新需求

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

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

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

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

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

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

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

show() {
? ? // 最終要顯示的數(shù)字
? ? let endNum = this.dashboard.event_count.total;
? ? // 動畫間隔
? ? let rate = 30;
? ? // 總時(shí)長
? ? 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;
? ? ? ? // 清空定時(shí)器
? ? ? ? clearInterval(timer);
? ? ? ? timer = null;
? ? ? }
? ? }, rate);
? },

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