tween.js实现数字过渡

下载tween.js

npm install --save @tweenjs/tween.js

以下是写好的vue组件

  {{numTween}}



import TWEEN from '@tweenjs/tween.js'
export default {
  name: 'Tween',
  props: {
    num: {
      type: [Number, String],
      default: 0
    },
    t: {
      type: Number,
      default: 1000
    }
  },
  data () {
    return {
      numTween: 0
    }
  },
  methods: {
    changeNum(newValue, oldValue){
      new TWEEN.Tween({
        number: oldValue
      })
        .to({
          number: newValue
        }, this.t)
        .onUpdate(tween => {
          this.numTween = tween.number.toFixed(0)
        })
        .start();
      function animate() {
        if (TWEEN.update()) {
          requestAnimationFrame(animate);
        }
      }
      animate()
    }
  },
  watch: {
    num (newValue, oldValue) {
      this.changeNum(newValue, oldValue)
    }
  },
  created() {
    this.changeNum(this.num, 0)
  }
}

num： 需要过渡的数字，支持动态数字 t: 过渡时间，单位毫秒