74

一部のブラウザはをサポートrequestAnimationFrameしているので、それを使用してみませんか？結局のところ、それはグーグルクローム10以来サポートされています。それにもかかわらず、jQueryはそれを使用していないようです。それについてのバグレポートを見つけましたが、本当の説明はありませんでしたか？ただし、jQueryの人々には理由があると確信しています。

なぜ彼らはこの素晴らしいAPIを使用しないのでしょうか？

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のバックグラウンドウィンドウでも確実に動作します。Android2.3をテストすると、ポリフィルを使用しており、期待どおりに動作しているようです。

jQuery 3

jQuery3.0はrequestAnimationFrameを統合します。基本的に、jQueryはそれをうまく処理できますが、一部のユーザーは.setInterval(function() { tag.animate(それを台無しにして呼び出すでしょう。したがって、メジャーバージョンリリースへのパント。jQuery 3はIE8以下をサポートしておらず、今後もサポートしないため、IE8ユーザーがいる場合は、jQuery1.xを使用してください。

CSSトランジション

私のテストでは、CPU/バッテリー節約の主張requestAnimationFrameは誤った約束です。たとえば、ロングフェードをオンにすると、CPU使用率が高くなります。CPU /バッテリーを節約するのはCSSトランジションです。おそらく、ブラウザー、特にモバイルブラウザーは、意図していることや他に何を求められているかについて、はるかに強力な仮定を立てることができ、ネイティブコードは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 に答える