關(guān)于tween的安裝和說明,請見:
git地址:https://github.com/tweenjs/tween.js
animate-number使用方法
tween需要2個對象:目標(biāo)數(shù)據(jù)對象和展示數(shù)據(jù)對象
-
目標(biāo)數(shù)據(jù)對象
我們做的任何數(shù)據(jù)變化,都是對該數(shù)據(jù)進行操作。也就是下面示例中的totalBet。 -
展示數(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()
}
}