animate用法 js原生_如何用js自己实现Animate运动函数

js运动是我们学习js必不可少的研究部分，首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已，比如不断改变一个绝对定位div的left值，那么你看到的效果就是这个div不断的向右边运动，那么运动的原理就是这样。

我们知道从a这一点到b这一点我们的运动方式有很多，

1.比如匀速运动到这一点

2.比如先快后慢，

3.必须先慢后快等等

所以我们的运动算法也有很多，那么下面我就图解一下如何写我们自己的运动算法

先看匀速算法

于是我们可以用js写出这段代码

/** 运动算法

* t:动画已经消耗的时间

* b:小球初始位置

* c:小球的需要移动额距离

* 动画持续的总时间

**/

var tween ={

linear:function(t, b, c, d){return c * t / d +b;

}

}

然后我们看看非匀速运动

我们用代码写出来

var tween = {

strongEaseOut:function( t, b, c, d){

return t * t *c / (d *d) + b;

},

}

我们现在只是介绍两种不同的运动算法，当然运动算法还要很多，我们不意义例举，我们接着看如何写改变属性的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的原型上定义一个start方法，该方法表示运动开始

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(){

//如果self返回false，则取消定时器

if( self.step()=== false ) {

clearInterval( timeId )

}

},19)

}

上面的setInterval每隔19毫秒就会执行一次，每次都是执行step方法，step方法就是每次需要计算更新小球的位置

Animate.prototype.step = function(){

//目前的时间

var t = +new Date;

//如果时间超过开始时间和需要时间之和，则矫正目前的位置为目标位置

if( t >= this.startTime + this.duration ) {

this.update( this.endPos )

return false;//返回false为了取消定时器

}

//计算小球的位置

var pos = this.easing( t - this.startTime, this.startPos, this.endPos-this.startPos ,this.duration)

//更新div的属性

this.update( pos )

}

那么update方法也仅仅就是更新div的属性而已

//更新当前位置

Animate.prototype.update = function( pos ){

this.dom.style[ this.propertyName ] = pos + 'px'

}

接下来我们看看我们在html里面如何执行，html代码

然后是执行代码

var div = document.getElementById('div')

var animate = new Animate( div )

animate.start('left',500,5000,'linear')

到现在我们整个运动就结束了