Vue实现数字动画的几种方案

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

<script>
export default {
  data() {
    return {
      currentValue: 1, // 初始值
      targetValue: 10000, // 目标值
      duration: 3000, // 动画持续时间
      intervalId: null, // 用于保存 setInterval 的 ID
    };
  },
  mounted() {
    this.startAnimation();
  },
  beforeDestroy() {
    clearInterval(this.intervalId); // 清除定时器，防止内存泄漏
  },
  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
          ); // 更新数字
        }
      }, interval);
    },
  },
};
</script>

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

<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>

<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>