數字慢慢減少動畫

參考鏈接: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)
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容