经常遇到这样的效果，数字的变化，比如从 0 到 500 这样的。
直接变当然是可以的，但是加一些缓动效果用户体验会更好。
假设你在一个vue的项目中
安装依赖：
npm install --save @tweenjs/tween.js
或者直接使用cdn:
<script src="https://cdn.bootcss.com/tween.js/r14/Tween.min.js"></script>
简单效果图：
image.png
代码如下：
html:
<div id="app">
<button @click="change">start</button>
<button @click="reset">reset</button>
<div>init-num: {{num}}</div>
<div>tween-num: {{numTween}}</div>
</div>
css:
body {
display: flex;
height: 100vh;
}
#app {
margin: auto;
width: 300px;
}
js:
import TWEEN from '@tweenjs/tween.js'
new Vue({
el: '#app',
data () {
return {
num: 0,
numTween: 0
}
},
watch: {
num (newValue, oldValue) {
new TWEEN.Tween({
number: oldValue
})
.to({
number: newValue
}, 5000)
.onUpdate(tween => {
this.numTween = tween.number.toFixed(0)
})
.start()
function animate() {
if (TWEEN.update()) {
requestAnimationFrame(animate);
}
}
animate()
}
},
methods: {
change () {
this.num = 500
},
reset () {
this.num = 0
}
}
})
具体做法：
结合了 vue 的 watch 和 tween.js 的功能 轻松实现了数字的缓动
具体demo vue number tween by 潘家大少爷 (@jackpan) on CodePen.
