如何在你的vue项目中实现累加动画

站长

2023年06月08日 21:31 · 阅读数 22

老板新需求

把这里的值做成动画累加动态来展示的

如何在你的vue项目中实现累加动画

首先我们进行分析，这个值肯定是接口传过来的，我们让一个count从0开始，设置一个定时器进行累加，count等于接口传回的值时，关闭定时器。那么重点在于这个函数什么时候调用，我们必须确保执行这个函数的时候接口是拿到了这个值的

方案：接口调用完毕的时候调取这个函数即可

既然如此，思路也很简单，只需要拿到接口的值，接口调用完毕后调用该动效函数，这个设置定时器累加即可，当count等于指定值时清除定时器那么我们可以拿到初步代码：

show(){
let endNum = 1200
let count = 0
let timer = setInterval(() => {
  count ++ 
  if(count > endNum){
    // 避免count大于endNum最终数字显示不对
    count = endNum
    // 清空定时器
    clearInterval(timer)
    timer = null
  }
}, 10);
}

我们再来分析，既然要累加，那么万一这个接口传回的值是个几百万呢?如果频率不变的话，得加到猴年马月啊，所以我们需要根据值的大小来定义步频，保障能在指定时间内完工

方案：**时长(time) / 频率(rate) * 数字的步长(step)（每 1时间间隔增加的值） = endNum(我们要展示的最终数据)**

show() {

    // 最终要显示的数字

    let endNum = this.dashboard.event_count.total;

    // 动画间隔

    let rate = 30;

    // 总时长

    let time = 2000;

    // 步长,数据增加间隔

    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最终数字显示不对
        count = endNum;
        this.dashboard.event_count.total = count;
        // 清空定时器
        clearInterval(timer);
        timer = null;
      }
    }, rate);
  },