快捷導(dǎo)航

Vue實(shí)現(xiàn)數(shù)字動(dòng)畫的幾種方案

更新時(shí)間：2025年02月24日 08:43:05 作者：百錦再@新空間代碼工作室

本文介紹了三種使用Vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)字動(dòng)畫的方案：使用Vue的響應(yīng)式數(shù)據(jù)與`setInterval`逐步更新數(shù)字,通過(guò)Vue的動(dòng)畫API和CSS動(dòng)畫效果為數(shù)字增加過(guò)渡效果,以及使用更高效的`requestAnimationFrame`來(lái)提供更加流暢的動(dòng)畫表現(xiàn),每種方案都詳細(xì)說(shuō)明了原理、實(shí)現(xiàn)步驟和代碼示例

1. 使用 Vue 的響應(yīng)式數(shù)據(jù)與 setInterval 實(shí)現(xiàn)數(shù)字動(dòng)畫

Vue 的響應(yīng)式系統(tǒng)非常適合用來(lái)處理動(dòng)態(tài)數(shù)據(jù)的更新。在這種方案中，我們利用 Vue 的 data 來(lái)存儲(chǔ)動(dòng)態(tài)數(shù)字，并結(jié)合 JavaScript 的 setInterval 或 requestAnimationFrame 來(lái)實(shí)現(xiàn)數(shù)字的逐步增加。

1.1 方案原理

數(shù)據(jù)綁定：我們通過(guò) Vue 的響應(yīng)式系統(tǒng)來(lái)綁定數(shù)字?jǐn)?shù)據(jù)，Vue 會(huì)自動(dòng)檢測(cè)數(shù)據(jù)變化并更新視圖。
計(jì)時(shí)器：使用 setInterval 來(lái)定時(shí)更新數(shù)字，逐步增加。
過(guò)渡效果：通過(guò) CSS 或 Vue 動(dòng)畫 API 來(lái)給數(shù)字變化加上過(guò)渡效果，確保數(shù)字的變化不顯得突兀。

1.2 實(shí)現(xiàn)步驟

初始化數(shù)據(jù)：在 Vue 組件中定義一個(gè)數(shù)字 currentValue，初始值為 1。
定時(shí)器更新數(shù)字：使用 setInterval 在一定時(shí)間間隔內(nèi)逐步增加數(shù)字，直到達(dá)到 10000。
動(dòng)畫效果：通過(guò) CSS 或 Vue 動(dòng)畫 API 實(shí)現(xiàn)平滑過(guò)渡。

<template>
  <div>
    <h1>{{ currentValue }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentValue: 1, // 初始值
      targetValue: 10000, // 目標(biāo)值
      duration: 3000, // 動(dòng)畫持續(xù)時(shí)間
      intervalId: null, // 用于保存 setInterval 的 ID
    };
  },
  mounted() {
    this.startAnimation();
  },
  beforeDestroy() {
    clearInterval(this.intervalId); // 清除定時(shí)器，防止內(nèi)存泄漏
  },
  methods: {
    startAnimation() {
      const startTime = Date.now();
      const interval = 10; // 每次更新的時(shí)間間隔，單位為毫秒
      const step = this.targetValue / (this.duration / interval); // 計(jì)算每次增加的量

      this.intervalId = setInterval(() => {
        const elapsedTime = Date.now() - startTime;
        if (elapsedTime >= this.duration) {
          this.currentValue = this.targetValue; // 達(dá)到目標(biāo)值時(shí)，停止動(dòng)畫
          clearInterval(this.intervalId);
        } else {
          this.currentValue = Math.min(
            this.targetValue,
            Math.floor(step * (elapsedTime / interval)) + 1
          ); // 更新數(shù)字
        }
      }, interval);
    },
  },
};
</script>

<style scoped>
h1 {
  transition: transform 0.2s ease-in-out;
}
</style>

1.3 方案解釋

初始化和數(shù)據(jù)綁定：通過(guò) Vue 的 data 屬性，我們創(chuàng)建了 currentValue 和 targetValue，currentValue 用于顯示在頁(yè)面上，targetValue 為我們想要增長(zhǎng)的目標(biāo)值（10000）。
定時(shí)器：setInterval 被用來(lái)定時(shí)更新 currentValue。每隔 10ms 更新一次，直到 currentValue 達(dá)到目標(biāo)值。每次更新時(shí)，currentValue 會(huì)增加一定的步長(zhǎng)，確保動(dòng)畫效果平滑。
銷毀定時(shí)器：當(dāng)組件銷毀時(shí)，使用 beforeDestroy 鉤子清除定時(shí)器，以防止內(nèi)存泄漏。
過(guò)渡效果：CSS 中的 transition 用于添加視覺上的平滑過(guò)渡效果。

2. 使用 Vue 動(dòng)畫 API (transition 和 @keyframes)

除了 setInterval，Vue 自帶的動(dòng)畫 API 可以幫助我們?cè)跀?shù)字變化時(shí)添加更精美的動(dòng)畫效果。通過(guò)結(jié)合 CSS 的 @keyframes 動(dòng)畫，我們可以控制數(shù)字增長(zhǎng)的動(dòng)畫表現(xiàn)。

2.1 方案原理

Vue 動(dòng)畫：Vue 自帶的 transition 標(biāo)簽可以用來(lái)包裝動(dòng)畫元素并應(yīng)用過(guò)渡效果。
CSS 動(dòng)畫：通過(guò) @keyframes 來(lái)定義從 1 到 10000 的數(shù)字增長(zhǎng)過(guò)程。
數(shù)據(jù)動(dòng)態(tài)更新：通過(guò)響應(yīng)式的 currentValue 數(shù)據(jù)更新頁(yè)面顯示的數(shù)字。

2.2 實(shí)現(xiàn)步驟

<template>
  <div>
    <transition name="fade">
      <h1>{{ currentValue }}</h1>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentValue: 1,
      targetValue: 10000,
      duration: 3000,
    };
  },
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      const startTime = Date.now();
      const interval = 10;
      const step = this.targetValue / (this.duration / interval);
      const intervalId = setInterval(() => {
        const elapsedTime = Date.now() - startTime;
        if (elapsedTime >= this.duration) {
          this.currentValue = this.targetValue;
          clearInterval(intervalId);
        } else {
          this.currentValue = Math.floor(step * (elapsedTime / interval)) + 1;
        }
      }, interval);
    },
  },
};
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
</style>

2.3 方案解釋

Vue 動(dòng)畫 API：我們使用了 Vue 的 transition 標(biāo)簽來(lái)包裹 h1 標(biāo)簽，這樣可以對(duì)數(shù)字的變化加上過(guò)渡效果。fade-enter-active 和 fade-leave-active 用來(lái)控制過(guò)渡的時(shí)間和效果。
CSS 動(dòng)畫：通過(guò) transition 和 @keyframes 來(lái)控制數(shù)字動(dòng)畫的平滑過(guò)渡。
定時(shí)器：定時(shí)更新 currentValue，每隔一定時(shí)間更新一次數(shù)字。

3. 使用 requestAnimationFrame 實(shí)現(xiàn)更流暢的動(dòng)畫效果

requestAnimationFrame 是瀏覽器提供的一種優(yōu)化的動(dòng)畫更新方式，它比 setInterval 更加高效，能夠在瀏覽器的每一幀繪制前更新動(dòng)畫，從而避免出現(xiàn)卡頓現(xiàn)象。

3.1 方案原理

高效的動(dòng)畫更新：requestAnimationFrame 會(huì)在瀏覽器的每一幀更新時(shí)調(diào)用提供的回調(diào)函數(shù)，提供了更高效、更平滑的動(dòng)畫效果。
逐步增加數(shù)字：通過(guò)計(jì)算每幀需要增加的數(shù)字，并在回調(diào)中更新 currentValue。

3.2 實(shí)現(xiàn)步驟

<template>
  <div>
    <h1>{{ currentValue }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentValue: 1,
      targetValue: 10000,
      duration: 3000,
      startTime: null,
    };
  },
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      this.startTime = Date.now();
      this.animate();
    },
    animate() {
      const elapsedTime = Date.now() - this.startTime;
      const step = this.targetValue / this.duration;

      if (elapsedTime < this.duration) {
        this.currentValue = Math.floor(step * elapsedTime);
        requestAnimationFrame(this.animate); // 每幀更新
      } else {
        this.currentValue = this.targetValue;
      }
    },
  },
};
</script>

<style scoped>
h1 {
  font-size: 2em;
  transition: transform 0.2s ease-in-out;
}
</style>

3.3 方案解釋

使用 requestAnimationFrame：與 setInterval 不同，requestAnimationFrame 會(huì)自動(dòng)適應(yīng)瀏覽器的幀率，保證動(dòng)畫的流暢性。
逐幀更新數(shù)字：通過(guò)計(jì)算每一幀應(yīng)該增加的數(shù)字值，逐步更新 currentValue，并通過(guò) requestAnimationFrame 不斷調(diào)用動(dòng)畫函數(shù)，直到動(dòng)畫完成。
動(dòng)畫過(guò)渡：利用 Vue 和 CSS 的過(guò)渡效果，給數(shù)字的變化添加平滑的視覺效果。