数字滚动动画效果

方法一：手写 JS 方法

/* 数字滚动动画 */
numScroll(startNum, maxNum) {
  const that = this;
  let numText = startNum;
  let animateFrame; // 清除 requestAnimationFrame 请求动画帧
  // 数字动画
  function digitalAnimation() {
    numText += 5; // 速度的计算可以为小数 。数字越大，滚动越快
    if (numText >= maxNum) {
      numText = maxNum;
      cancelAnimationFrame(animateFrame);
    } else {
      animateFrame = requestAnimationFrame(digitalAnimation); // 请求动画帧(一个浏览器的宏任务)
    }
    that.amount = numText;
  }
  digitalAnimation(); // 数字动画
}

完整代码

<template>
  <div>
    <div @click="numScroll(0, 520)">滚动</div>
    <div>{{ amount }}</div>
  </div>
</template>

<script>
  export default {
  data() {
    return {
      amount: 0,
    };
  },
  methods: {
    /* 数字滚动动画 */
    numScroll(startNum, maxNum) {
      const that = this;
      let numText = startNum;
      let animateFrame; // 清除 requestAnimationFrame 请求动画帧
      // 数字动画
      function digitalAnimation() {
        numText += 5; // 速度的计算可以为小数 。数字越大，滚动越快
        if (numText >= maxNum) {
          numText = maxNum;
          cancelAnimationFrame(animateFrame);
        } else {
          animateFrame = requestAnimationFrame(digitalAnimation); // 请求动画帧(一个浏览器的宏任务)
        }
        that.amount = numText;
      }
      digitalAnimation(); // 数字动画
    }
  }
};
</script>

<style scoped></style>

方法二：使用 vue-count-to 插件

vue-count-to 是一个没有依赖的轻量级 vue 组件，可以自行覆盖 EasingFn。可以设置 startVal 和 endVal，它会自动判断计数进行数字渲染。

npm install vue-count-to

<template>
  <div>
    <CountTo :startVal="startVal" :endVal="endVal" :duration="duration" />
  </div>
</template>

<script>
import CountTo from "vue-count-to";

export default {
  components: { CountTo },
  data() {
    return {
      startVal: 0, // 开始值
      endVal: 100, // 开始值
      duration: 3000, // 持续时间(毫秒为单位)
      timer: null // 定时器
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.endVal = this.endVal * 2;
    }, 4000);
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style scoped></style>

参数选项：

属性	描述	类型	默认
startVal	开始值	Number	0
endVal	结束值	Number	2017
duration	持续时间，以毫秒为单位	Number	3000
autoplay	自动播放	Boolean	true
decimals	要显示的小数位数	Number	0
decimal	十进制分割	String	.
separator	分隔符	String	,
prefix	前缀	String	""
suffix	后缀	String	""
useEasing	使用缓和功能	Boolean	true
easingFn	缓和回调	Function	—

注意：当autoplay：true时，它将在startVal或endVal更改时自动启动

函数名称	描述
mountedCallback	挂载以后返回回调
start	开始计数
pause	暂停计数
reset	重置countTo