让div运动起来 js实现缓动效果

前端之家收集整理的这篇文章主要介绍了让div运动起来 js实现缓动效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了js实现缓动效果的具体代码,供大家参考,具体内容如下

var Animate = 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 = +new Date;
this.startPos = this.dom.getBoundingClientRect()[propertyName];
this.propertyName = propertyName;
this.endPos = endPos;
this.duration = duration;
this.easing = tween[easing];

var self = this;
var timeId = setInterval(function(){
if(self.step() === false){
clearInterval(timeId);
}
},19);
}

Animate.prototype.step = function(){
var t = +new Date;
if(t>=this.startTime + this.duration){
this.update(this.endPos);
return false;
}
var pos = 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';
}

var div = document.getElementById('div');
var animate = new Animate(div);
animate.start('left',500,1000,'h3EaSEOut');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/38070.html

猜你在找的JavaScript相关文章