web-dev-qa-db-ja.com

jQueryがrequestAnimationFrameを使用しないのはなぜですか？

一部のブラウザはrequestAnimationFrameをサポートしているので、使用しないのはなぜですか？結局のところ、それは Google Chrome 1 以降でサポートされています。それにもかかわらず、jQuery それを使用していないようです 。 a バグレポート についてですが、実際の説明はありませんか？jQueryの人々には理由があると確信しています。

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

jqueryrequestanimationframe
73
Randomblue

ticket＃9381 で、しばらくしてrequestionAnimationFrameの使用を停止した理由を確認できます。

要約すると、問題は、ウィンドウにフォーカスがなかったときにアニメーションが実行されなかった（ブラウザーがCPUの負荷を軽減しようとする）ことでした。さらに、アニメーションキューが積み重なり、ウィンドウがフォーカスを取り戻した後、事態は悪化しました。これには、コードのい変更や、アニメーションキューへの追加方法の変更が必要になります。そのため、これを行うより良い方法が見つかるまで、サポートは削除されることが決定されました。

74
Mitar

ここで他の答えと異議を考えて、私はこれを簡単なスライドショーアニメーションでテストしたいと思いました。

http://brass9.com/nature

2013年の時点で、ここでの他の回答の異議は重要ではなくなったようです。私は追加しました

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

既存のアニメーションコードに追加し、使用中のフェードアニメーションがオンになって影響を与えていることを確認しました。バックグラウンドウィンドウでも、Chrome 30、IE 11、FF24。テスト中Android 2.3 、ポリフィルを使用し、期待どおりに動作するようです。

jQuery 3

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

CSSトランジション

私のテストでは、requestAnimationFrameのCPU /バッテリー節約の主張は偽りの約束です。ロングフェードなどで、CPU使用率が高くなっています。 CPU /バッテリーを節約するのは CSS Transitions です。おそらく、ブラウザー、特にモバイルブラウザーは、あなたが意図していることや他に何が求められているかについて、より強力な仮定を立てることができ、ネイティブコードはまだですJavascript + DOMよりも高速です。

CPU /バッテリーを本当に節約したい場合は、CSSトランジションが最適です。 IE9以下ではそれらを処理できず、まだ多くのユーザーがいるため、ページの下部で jquery.transit とanimateへのフォールバックを検討してください。

12
Chris Moschini

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に戻されるでしょう。 "アニメーションキューを使用する（おそらくそれは意見の問題ですが）。

6
jfriend00