快捷導(dǎo)航

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

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

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

老板新需求

把這里的值做成動(dòng)畫(huà)累加動(dòng)態(tài)來(lái)展示的

首先我們進(jìn)行分析，這個(gè)值肯定是接口傳過(guò)來(lái)的，我們讓一個(gè)count從0開(kāi)始，設(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ù)即可

既然如此，思路也很簡(jiǎn)單，只需要拿到接口的值，接口調(diào)用完畢后調(diào)用該動(dòng)效函數(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ù)字顯示不對(duì)
    count = endNum
    // 清空定時(shí)器
    clearInterval(timer)
    timer = null
  }
}, 10);
}

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

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

show() {
? ? // 最終要顯示的數(shù)字
? ? let endNum = this.dashboard.event_count.total;
? ? // 動(dòng)畫(huà)間隔
? ? let rate = 30;
? ? // 總時(shí)長(zhǎng)
? ? let time = 2000;
? ? // 步長(zhǎng),數(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ù)字顯示不對(duì)
? ? ? ? count = endNum;
? ? ? ? this.dashboard.event_count.total = count;
? ? ? ? // 清空定時(shí)器
? ? ? ? clearInterval(timer);
? ? ? ? timer = null;
? ? ? }
? ? }, rate);
? },

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

展示數(shù)據(jù)

但是這還不夠優(yōu)雅

由于項(xiàng)目是老板的我不好大改，如果是自己的項(xiàng)目的話，那么可以寫(xiě)一個(gè)組件來(lái)展示這些數(shù)據(jù)，把這個(gè)函數(shù)也封裝在組件里，這樣子復(fù)用性極強(qiáng)，本身這個(gè)項(xiàng)目就有許多地方需要展示數(shù)據(jù)

再者，可以把這個(gè)函數(shù)封裝成hooks來(lái)調(diào)用，也會(huì)很方便

第三個(gè)是我看別的大佬的方法，就是自己創(chuàng)建一個(gè)指令，就像是v-for這種。

到此這篇關(guān)于詳解如何在Vue項(xiàng)目中實(shí)現(xiàn)累加動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)Vue累加動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: