js实现缓动效果

这篇文章将为大家详细讲解有关js实现缓动效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.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');

关于“js实现缓动效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。