数字慢慢减少动画

参考链接:https://www.cnblogs.com/diligenceday/p/5934190.html
//减速曲线

 parseNextNum(t,c,d,b){   
    return Math.ceil(-c *(t/=d)*(t-2) + b);
 }

//动画

    numberAnimate(num){
          var that = this;
          clearInterval(that.num_anim_interval);
           var t = 0; //初始时间
                  //that.surplus  渲染到页面上面的值,初始值为1000000
           var c =  num - that.surplus; //变化量
           var d = 2000;//持续时间
           var b = that.surplus; //初始值
           that.num_anim_interval = setInterval(function(){
                that.surplus = that.parseNextNum(t,c,d,b);
                console.log(that.surplus)
                t = t+100;
//              console.log(that.surplus,num,t);
                if(that.surplus == num){
                    clearInterval(that.num_anim_interval);
                }
           },100);
       },

//onshow的时候执行动画

this.numberAnimate(1000)

你可能感兴趣的:(数字慢慢减少动画)