74

有些浏览器支持requestAnimationFrame，为什么不使用呢？毕竟从 Google Chrome 10 开始就支持了。尽管如此，jQuery似乎并没有使用它。我发现了一个关于它的错误报告，但没有给出真正的解释？不过，我确信 jQuery 人有他们的理由。

他们为什么不使用这个很棒的 AP​​I？

4

3 回答 3

76

在票 #9381中，您可以阅读为什么他们requestionAnimationFrame在一段时间后停止使用。

总而言之，问题是当窗口没有焦点时动画没有运行（浏览器试图减少 CPU 负载），如果窗口被隐藏，这是可以的，但如果它是可见的，就没有焦点。此外，动画队列堆积如山，在窗口重新获得焦点后，事情变得疯狂起来。这将需要对代码进行丑陋的更改和/或更改人们将内容添加到动画队列的方式。所以决定取消支持，直到有更好的方法来做到这一点。

于 2012-01-24T23:11:07.343 回答
12

鉴于这里的其他答案和反对意见，我想在一个简单的幻灯片动画中对此进行测试：

http://brass9.com/nature

截至 2013 年，此处其他答案中的反对意见似乎不再重要。我已经添加

https://github.com/gnarf/jquery-requestAnimationFrame/blob/master/src/jquery.requestAnimationFrame.js

到我现有的动画代码，并验证它正在打开并影响正在使用的淡入淡出动画。即使在后台窗口、Chrome 30、IE 11 和 FF 24 中，它也能可靠地工作。测试 Android 2.3，它似乎使用了 polyfill 并按预期工作。

jQuery 3

jQuery 3.0 集成了 requestAnimationFrame。基本上，jQuery 可以很好地处理它，但有些用户会调用.setInterval(function() { tag.animate(，搞砸了。因此，主要版本发布的平底船。jQuery 3 不支持也永远不会支持 IE8 及更低版本，因此如果您有 IE8 用户，请坚持使用 jQuery 1.x。

CSS 过渡

在我的测试中，CPU/电池节省声称requestAnimationFrame是虚假的承诺。我看到它的 CPU 使用率很高，例如，长时间淡入淡出。节省 CPU/电池的是CSS Transitions，可能是因为浏览器，尤其是移动浏览器，会对您的意图和其他要求做出更强有力的假设，并且本机代码仍然比 Javascript+DOM 更快。

因此，如果您真的想节省 CPU/电池，CSS 过渡适合您。IE9 及更低版本无法处理它们，并且仍然有很多用户，因此请考虑jquery.transit及其animate在页面底部的后备。

于 2013-11-03T22:09:03.160 回答
6

在 v1.6.2 的 jQuery 源代码中，requestAnimationFrame如果它存在，我会看到它被使用。我没有仔细研究过代码，看它被用于它可以用于的所有事情，但它被用于代码的动画部分，而不是调用setInterval(). 这是 1.6.2 中的代码：

// Start an animation from one number to another
custom: function( from, to, unit ) {
    var self = this,
        fx = jQuery.fx,
        raf;

    this.startTime = fxNow || createFxNow();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
    this.now = this.start;
    this.pos = this.state = 0;

    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !timerId ) {
        // Use requestAnimationFrame instead of setInterval if available
        if ( requestAnimationFrame ) {
            timerId = true;
            raf = function() {
                // When timerId gets set to null at any point, this stops
                if ( timerId ) {
                    requestAnimationFrame( raf );
                    fx.tick();
                }
            };
            requestAnimationFrame( raf );
        } else {
            timerId = setInterval( fx.tick, fx.interval );
        }
    }
},

我还没有使用 1.6.4，所以我不知道那个版本。如果它不在那个版本中，那么一定有一些问题，所以它被删除了。

编辑：

如果您阅读此博客文章，听起来它已从 1.6.3 中撤出，并且可能会在 1.7 中放回，并且它被撤出的主要原因是因为它破坏了人们“错误地”使用动画队列的一些东西（虽然也许这是一个见仁见智的问题）。

于 2011-11-03T18:08:39.000 回答