美文网首页
数字慢慢减少动画

数字慢慢减少动画

作者: _conquer_ | 来源:发表于2019-05-16 17:03 被阅读0次

    参考链接: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)
    

    相关文章

      网友评论

          本文标题:数字慢慢减少动画

          本文链接:https://www.haomeiwen.com/subject/mbyiaqtx.html