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

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

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');

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。