当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 让div运动起来 js实现缓动效果

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了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');

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网