让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');
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。