javascript

jquery动画实现原理

最近想写个动画库练练手，在写之前，先看了jquery动画方面的源代码，为此写篇博文记录一下心得体会。

概述

jquery动画很强大，它有一个很强大的特性：动画队列，比如：

1
2
3
4
5
6
<button id="animation-test">test</button>
<script>
    $('#animation-test').click(function() {
        $(this).animate({width: 200}).animate({opacity: 0.5});
    });
</script>

示例：运行一下

可以看到，该按钮的动画按照调用animate的顺序播放了！

其实在jquery动画中，个人认为，主要就是以下东西：

  • 主循环
  • 队列
  • Tween

当然还有一些其他的，比如deferred等，不过这跟本文没多大关系，本文只讲jquery动画的骨架。

主循环

我们知道，动画都有一个过渡时间，叫duration，而动画要做的事情，就是将duration分解成一个一个小时间片段，这些分割点称之为frame。

在动画中，最常用的时间分片手段就是setInterval（本文不讲关于requestAnimationFrame的内容），jquery就是这么干的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var timerId = null;
jQuery.timers = [];
jQuery.fx.tick = function() {
    // ...
};

jQuery.fx.timer = function( timer ) {
    jQuery.timers.push(timer);
    if(timer()) {

    } else {

    }
    // ...
};

jQuery.fx.interval = 13;

jQuery.fx.start = function() {
    if(!timerId) {
        setInterval(jQuery.fx.tick, jQuery.fx.interval);
    }
    // ...
};

jQuery.fx.stop = function() {
    // ...
};

以上是摘自jquery的一段代码，它只用了一个定时器就搞定了所有动画，这个就是所谓的动画主循环，它是怎么做到的？

在Animation这个方法中，有如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 帧处理函数
var tick = function() {
    for ( ; index < length ; index++ ) {
        nimation.tweens[ index ].run( percent );
    }
};
var animation = deferred.promise({ //
    // ...
});
// 对每个属性都创建一个Tween对象
jQuery.map(props, createTween, animation);
// 开始计时器，将tick函数添加到jQuery.timers数组中
// 添加时会立马调用一次tick，第一帧（见上述jQuery.fx.timer方法）
// 以后每隔13毫秒都会调用一次
jQuery.fx.timer(tick);

return animation.progress(xxx)
    .done(xxx)
    .fail(xxx).
    always(xxx);

每次调用animate方法都会进入到Animation这个方法中，其实我们可以认为这里生成了一个动画对象。

在这里会把这个动画对象的tick方法放入到jQuery.timers中，而上文所说的主循环就会定时扫描这个timers数组，发现里面有tick就拿出来执行。

在动画主循环的每一帧中，会执行jQuery.timers中的所有tick，从而使每个动画在每一帧中都得到一次执行更新的机会。

那什么时候会进入到Animation这个方法中呢？看一下jquery动画入口方法animate的实现：

1
2
3
4
var doAnimation = function() {
    var animation = Animation(xxx); // 调用了Animation这个方法
};
this.queue(doAnimation);  // 入列

animate只是对doAnimation方法进行入列（原代码也有立即执行doAnimation的分支，这里就不多讲），什么时候会执行doAnimation呢？

队列

jquery对相同元素的动画进行了队列控制，并且它是把队列存放到DOM元素上的，在queue方法有以下代码：

1
2
3
if(type === 'fx' && queues[0] !== 'inprogress') {
    jQuery.dequeue(this, type);
}

入列动画任务时，jquery会判断队列头是不是inprogress，如果不是，说明这个元素当前没有在播放动画。

这个时候，jQuery会取出队列的第一个动画任务进行播放，这个逻辑写在jQuery.dequeue方法中：

1
2
3
4
5
6
7
8
9
var fn = queue.shift();

if(fn) {
    if(type === 'fx') {
        queue.unshift('inprogress');
    }

    fn.call(elem, next, hooks);
}

PS：需要注意的是，jQuery有两个dequeue、queue方法，一个是在jQuery类上，一个是在jQuery的原型上（即jQuery.fn中）

以上代码需要注意的是inprogress这个标志！顾名思义，它是用来标志该元素的队列中是不是有动画正在播放，jquery会在入列、出列的时候检查这个标志，以决定是否播放下一个动画。

还有一个问题：它什么时候播放下一个动画？当然是在上一个动画的complete回调中：

1
2
3
4
5
6
7
8
9
10
11
12
13
// Queueing
opt.old = opt.complete;

opt.complete = function() {
    if ( jQuery.isFunction( opt.old ) ) {
        opt.old.call( this );
    }

    if ( opt.queue ) {
        // 这个时候就会调出下一个动画任务
        jQuery.dequeue( this, opt.queue );
    }
};

Tween

这个类其实逻辑不是特别复杂，jquery会对每个样式属性都创建一个Tween对象，它主要是计算和更新元素的样式。

小结

以上就是阅读源代码后的一些理解，有不对之处，欢迎纠正/补充！

另，如果想阅读jquery源代码，推荐用github上的，上面的代码是模块化，传送门>>。