让div运动起来 js实现缓动效果
本文实例为大家分享了js实现缓动效果的具体代码,供大家参考,具体内容如下
vartween={ linear:function(t,b,c,d){ returnc*t/d+b; }, easeIn:function(t,b,c,d){ returnc*(t/=d)*t+b; }, strongEaseIn:function(t,b,c,d){ returnc*(t/=d)*t*t*t*t+b; }, strongEaseOut:function(t,b,c,d){ returnc*((t=t/d-1)*t*t*t*t+1)+b; }, sineaseIn:function(t,b,c,d){ returnc*(t/=d)*t*t+b; }, sineaseOut:function(t,b,c,d){ returnc*((t=t/d-1)*t*t*t+1)+b; } }; varAnimate=function(dom){ this.dom=dom; this.startTime=0; this.startPos=0; this.endPos=0; this.propertyName=null; this.easing=null; this.duration=null; } Animate.prototype.start=function(propertyName,endPos,duration,easing){ this.startTime=+newDate; this.startPos=this.dom.getBoundingClientRect()[propertyName]; this.propertyName=propertyName; this.endPos=endPos; this.duration=duration; this.easing=tween[easing]; varself=this; vartimeId=setInterval(function(){ if(self.step()===false){ clearInterval(timeId); } },19); } Animate.prototype.step=function(){ vart=+newDate; if(t>=this.startTime+this.duration){ this.update(this.endPos); returnfalse; } varpos=this.easing(t-this.startTime,this.startPos,this.endPos-this.startPos,this.duration); this.update(pos); } Animate.prototype.update=function(pos){ this.dom.style[this.propertyName]=pos+'px'; } vardiv=document.getElementById('div'); varanimate=newAnimate(div); animate.start('left',500,1000,'strongEaseOut');
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。