vue 实现数字缓动效果

经常遇到这样的效果，数字的变化，比如从 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.