美文网首页
使用tween实现animate-number

使用tween实现animate-number

作者: muroujue | 来源:发表于2018-10-15 16:20 被阅读0次

    关于tween的安装和说明,请见:
    git地址:https://github.com/tweenjs/tween.js

    animate-number使用方法

    tween需要2个对象:目标数据对象和展示数据对象

    1. 目标数据对象
      我们做的任何数据变化,都是对该数据进行操作。也就是下面示例中的totalBet。
    2. 展示数据对象
      另一个是将被tween调用的数据对象,它用来做不断变化的数据展示,直到和目标数据相同,才停止动画。
    ...
    <template>
      <p><strong>{{tweenTotalBet.number.toFixed(2)}}</strong></p>
    </template>
    ...
    data(){
      return {
        totalBet: {
          number:0
        },
        tweenTotalBet: {}
      }
    }
    mounted() {
      this.totalBet.number = 1345.12
    },
    methods: {
      animate(){
        if (TWEEN.update()) {
          requestAnimationFrame( this.animate )
        }
      }
    },
    watch: {
      'totalBet.number'(val){
        console.log(val)
        let tween = new TWEEN.Tween( this.tweenTotalBet )
          .to( this.totalBet , 3000 )
          .easing( TWEEN.Easing.Circular.Out )
          .start()
        this.animate()
      }
    }
    
    

    相关文章

      网友评论

          本文标题:使用tween实现animate-number

          本文链接:https://www.haomeiwen.com/subject/yiwfzftx.html