首页 > 代码库 > js实现缓动效果-让div运动起来
js实现缓动效果-让div运动起来
var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, easeIn:function(t,b,c,d){ return c * ( t /= d ) * t + b; }, strongEaseIn:function(t,b,c,d){ return c * ( t /= d ) * t * t * t * t + b; }, strongEaseOut:function(t,b,c,d){ return c * ( ( t = t / d -1 ) * t * t * t * t +1 ) + b; }, sineaseIn:function(t,b,c,d){ return c * ( t /= d ) * t * t + b; }, sineaseOut:function(t,b,c,d){ return c * ( ( t = t / d -1 ) * t * t *t +1 ) + b; }};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,‘strongEaseOut‘);
js实现缓动效果-让div运动起来
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。