使用tween實現(xiàn)animate-number

關(guān)于tween的安裝和說明,請見:
git地址:https://github.com/tweenjs/tween.js

animate-number使用方法

tween需要2個對象:目標(biāo)數(shù)據(jù)對象和展示數(shù)據(jù)對象

  1. 目標(biāo)數(shù)據(jù)對象
    我們做的任何數(shù)據(jù)變化,都是對該數(shù)據(jù)進行操作。也就是下面示例中的totalBet。
  2. 展示數(shù)據(jù)對象
    另一個是將被tween調(diào)用的數(shù)據(jù)對象,它用來做不斷變化的數(shù)據(jù)展示,直到和目標(biāo)數(shù)據(jù)相同,才停止動畫。
...
<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()
  }
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容