vue 实现数字缓动效果

vue 实现数字缓动效果

对于静态网页，增加一个数字缓动的效果能更好提升用户体验，
例如数字从0增加到一百，有个动态变动的过程，当然直接变也可以， 就是效果没那么好看

下面看代码

安装依赖：
npm install --save @tweenjs/tween.js

HTML

<div class="container-data">
<div class="container-data-head">班轮业务覆盖全广东省，散杂货业务覆盖全中国港口的综合物流服务商。</div>
   <el-row>
	 	<el-col :span="5">
          <div style="margin-top: 30px;border-right: 1px #D8D8D8 solid">
            <img src="../../assets/front/icon/data-icon1.png" alt="banner" style="width: 30px;"/><br>
            <p style="font-size: 15px">总部及分支机构</p><br>
            <span class="number">{{changeData1}}</span>家
          </div>
        </el-col>
        <el-col :span="5">
          <div style="margin-top: 30px;margin-left: 50px;border-right: 1px #D8D8D8 solid">
            <img src="../../assets/front/icon/data-icon2.png" alt="banner" style="width: 30px;"/><br>
            <p style="font-size: 15px">合作的当地代理</p><br>
            <span class="number">{{changeData2}}</span>家
          </div>
        </el-col>
        <el-col :span="14">
          <div style="margin-top: 30px;margin-left: 50px;">
            <img src="../../assets/front/icon/data-icon3.png" alt="banner" style="width: 30px;"/><br>
            <p style="font-size: 15px">合作船东及大客户</p><br>
            <span class="number">{{changeData3}}</span>家
          </div>
        </el-col>
   </el-row>
</div>

js

  import TWEEN from '@tweenjs/tween.js'

 data() {
      return {
        data1: 11,//总部及分支机构
        changeData1: 0,//总部及分支机构(变动数字)
        data2: 120,//合作的当地代理
        changeData2: 0,//合作的当地代理(变动数字)
        data3: 600,//合作船东及大客户
        changeData3: 0,//合作船东及大客户(变动数字)
      }
    },
    watch: {
      //实现数字缓动效果
      data1(newValue, oldValue) {
        new TWEEN.Tween({
          number: oldValue
        })
          .to({
            number: newValue
          }, 500)
          .onUpdate(tween => {
            this.changeData1 = tween.number.toFixed(0)
          })
          .start()

        function animate() {
          if (TWEEN.update()) {
            requestAnimationFrame(animate)
          }
        }

        animate()
      },
      data2(newValue, oldValue) {
        new TWEEN.Tween({
          number: oldValue
        })
          .to({
            number: newValue
          }, 500)
          .onUpdate(tween => {
            this.changeData2 = tween.number.toFixed(0)
          })
          .start()

        function animate() {
          if (TWEEN.update()) {
            requestAnimationFrame(animate)
          }
        }

        animate()
      },
      data3(newValue, oldValue) {
        new TWEEN.Tween({
          number: oldValue
        })
          .to({
            number: newValue
          }, 500)
          .onUpdate(tween => {
            this.changeData3 = tween.number.toFixed(0)
          })
          .start()

        function animate() {
          if (TWEEN.update()) {
            requestAnimationFrame(animate)
          }
        }

        animate()
      }
    },
    created() {
      //定时变动数字
      setInterval( () => {
        this.data1 = 0
        this.data2 = 0
        this.data3 = 0
        setTimeout(() => {
          this.data1 = 11
          this.data2 = 120
          this.data3 = 600
        },500) //这里需要延迟变动数字，是Vue检测数字变动
      },3000)
    },

实现效果

具体做法：
本次案例由于是静态的数字，所以使用定时器改动数字。如果是根据后台变动的可以自定义数字变动 。
结合 vue 的 watch 和 tween.js 的功能 轻松实现了数字的缓动