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

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

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

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

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

1.1 方案原理

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

1.2 實現(xiàn)步驟

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

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

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

      this.intervalId = setInterval(() => {
        const elapsedTime = Date.now() - startTime;
        if (elapsedTime >= this.duration) {
          this.currentValue = this.targetValue; // 達到目標值時，停止動畫
          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ù)綁定：通過 Vue 的 data 屬性，我們創(chuàng)建了 currentValue 和 targetValue，currentValue 用于顯示在頁面上，targetValue 為我們想要增長的目標值（10000）。
定時器：setInterval 被用來定時更新 currentValue。每隔 10ms 更新一次，直到 currentValue 達到目標值。每次更新時，currentValue 會增加一定的步長，確保動畫效果平滑。
銷毀定時器：當組件銷毀時，使用 beforeDestroy 鉤子清除定時器，以防止內(nèi)存泄漏。
過渡效果：CSS 中的 transition 用于添加視覺上的平滑過渡效果。

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

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

2.1 方案原理

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

2.2 實現(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 動畫 API：我們使用了 Vue 的 transition 標簽來包裹 h1 標簽，這樣可以對數(shù)字的變化加上過渡效果。fade-enter-active 和 fade-leave-active 用來控制過渡的時間和效果。
CSS 動畫：通過 transition 和 @keyframes 來控制數(shù)字動畫的平滑過渡。
定時器：定時更新 currentValue，每隔一定時間更新一次數(shù)字。

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

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

3.1 方案原理

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

3.2 實現(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 會自動適應瀏覽器的幀率，保證動畫的流暢性。
逐幀更新數(shù)字：通過計算每一幀應該增加的數(shù)字值，逐步更新 currentValue，并通過 requestAnimationFrame 不斷調(diào)用動畫函數(shù)，直到動畫完成。
動畫過渡：利用 Vue 和 CSS 的過渡效果，給數(shù)字的變化添加平滑的視覺效果。