我们现在只是介绍两种不同的运动算法，当然运动算法还要很多，我们不意义例举，我们接着看如何写改变属性的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代码
1<div style="position: absolute;background: blue;width: 100px;height: 100px;left: 0;" id="div"></div>
然后是执行代码
var div = document.getElementById('div')
var animate = new Animate( div )
animate.start('left',500,5000,'linear')
到现在我们整个运动就结束了
