接下来就是具体用timeline的各个接口了。

Animation.prototype.changePosition = function (el, positions, imageUrl) {

var me = this;

var len = position.length;

var taskFn;

var type;

if (len) {

taskFn = function (next, time) {

//next, time 是._asyncTask的时候，传过来的

//如果传入了图片地址，那么修改el的背景图

if (imageUrl) {

el.style.backgoundImage = 'url(' + imageUrl + ')';

}

//如果当前已经执行的回调次数 还没到最大值（ 设定中的动画执行次数）

//那么选择当前已经执行的回调次数作为索引(从0开始数，所以可以直接用)

// |0 既 Math.floor

var index = Math.min(time / me.interval | 0, len - 1)

//是这样[ 200 332 , 333 33,]的格式

var position = positions[index].split(' ')

el.style.backgoundPosition = position[0]+'px' +' '+ position[1]+'px'

//动画循环完成了的时候。

if (index === len - 1) {

next();

}

}

type = TASK_ASYNC;

} else {

//这里的next就是全局方法 next

taskFn = next;

type = TASK_SYNC;

}

return this._add(taskFn,type)

}

function next(callback) {

callback && callback()

}

//异步方法是这样的：

Animation.prototype._asyncTask = function(task) {

//设置timeline里面的每帧都调用的回调函数onenterframe。

var enterFrame = function (time) {

var me = this;

var taskFn = task.taskFn;

//回调函数的设置

var next = function () {

//停止当前的

me.timeline.stop()

//执行下一个

me._next()

}

taskFn(next,time)

}

this.timeline.onenterframe = enterFrame;

//通过this.prototype.start传进来的参数Interval传给timeline

this.timeline.start(this.interval)

}

创建Timeline实例，然后用在异步方法里。

function Animation() {

this.timeline = new Timeline();

//来自用户设定的时间间隔

this.interval = 0;

}

Animation.prototype._asyncTask = function(task) {

//设置timeline里面的每帧都调用的回调函数onenterframe。

var enterFrame = function (time) {

var me = this;

var taskFn = task.taskFn;

//回调函数的设置

var next = function () {

//停止当前的

me.timeline.stop()

//执行下一个

me._next()

}

taskFn(next,time)

}

this.timeline.onenterframe = enterFrame;

//通过this.prototype.start传进来的参数Interval传给timeline

this.timeline.start(this.interval)

}