vue实现数字滚动效果并匀速滚动

最近有一个需求就是：要求显示两个数之间的匀速滚动效果。一开始我是直接从网上找了一个插件，但是这个插件并不是匀速滚动的，这就导致当页面刷新后显示的数字不是刷新之前的，这样肯定不行啊，那么我们就思考将24小时分成若干等份来计算，下面直接贴代码：

  // 滚动效果数值计算
    getTimeDatas(start, end) {
      console.log(start, end, 9653)
      // 计算差值
      var res = Number(end - start)
      // 转化成毫秒
      var curTime = Number(this.configData.cur_time) * 1000
      // 计算秒的配速
      var speeds = res / 86400
      // var speeds = res / 360
      // 转化成时分秒
      var time = this.$dateFmt(curTime, 'HH:mm:ss')
      // 计算之前跑了多少值，初始值
      this.startVal = this.timeToSec(time) * speeds + Number(start)
      // this.startVal = start
      this.endVal = end
      // 计算还剩多少时间
      this.durationTime = Number((86400 - this.timeToSec(time)) * 1000)
      // this.durationTime = Number(360 * 1000)
      this.beatNums()
    },
    // 时间转为秒
    timeToSec(time) {
      console.log(time, 333)
      var hour = time.split(':')[0]
      var min = time.split(':')[1]
      var sec = time.split(':')[2]
      var s = parseInt(hour * 3600) + parseInt(min * 60) + parseInt(sec)
      return s
    },
    // 数字滚动效果
    beatNums() {
      // console.log(this.startVal, this.endVal, this.durationTime, this.frequencyVal, 666610)
      this.monthRewardNums = this.startVal
      this.timersNum = setInterval(() => {
        this.monthRewardNums += (this.endVal - this.startVal) / this.durationTime * 50
        if (this.monthRewardNums >= this.endVal) {
          clearInterval(this.timersNum)
          this.monthRewardNums = this.endVal
        }
      }, 50)
    }

有些童鞋不明函数beatNums为什么要乘以50，大家把50看成常量就行了。