vue金额滚动动画

效果预览

QQ20190124-0.gif

<template>
  <div>
    <div class="head" @click="this.numFun(0,5000)">点击金额变动</div>
   <div>{{amount}}</div>
  </div>
</<template>


<script>
export default {
  data () {
  return {
    amount: 0
  }
}
methods: {
    //金额变动动画
    numFun(startNum,maxNum) {
      var that = this
      let numText = startNum;
      let golb; // 为了清除requestAnimationFrame
      function numSlideFun(){ // 数字动画
          numText+=5; // 速度的计算可以为小数 。数字越大，滚动越快
          if(numText >= maxNum){
              numText = maxNum;
              cancelAnimationFrame(golb);
          }else {
              golb = requestAnimationFrame(numSlideFun);
          }
        that.amount=numText
        // console.log(numText)
      }
       numSlideFun(); // 调用数字动画
    }
  }
}