javascript - requestAnimationFrame の使用方法

Question

アニメーションは初めてですが、最近を使用してアニメーションを作成しましたsetTimeout。FPS が低すぎるため、このリンクrequestAnimationFrameで説明されている使用する解決策を見つけました。

これまでのところ、私のコードは次のとおりです。

//shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
        return  
            window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function(/* function */ callback){
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    (function animloop(){
        //Get metrics
        var leftCurveEndX = finalLeft - initialLeft;
        var leftCurveEndY = finalTop + finalHeight - initialTop;
        var rightCurveEndX = finalLeft + finalWidth - initialLeft - initialWidth;
        var rightCurveEndY = leftCurveEndY;

        chopElement(0, 0, 0, 0, leftCurveEndX, leftCurveEndY, rightCurveEndX, rightCurveEndY);//Creates a new frame 
        requestAnimFrame(animloop);
    })();

これは最初のフレームで停止します。関数にコールバック関数requestAnimFrame(animloop);がありchopElementます。

また、この API を使用するためのより完全なガイドはありますか?

score 83 · Accepted Answer

警告！この質問は、シムするための最良の方法についてではありません requestAnimFrame。あなたがそれを探しているなら、このページの他の答えに進んでください。

自動セミコロン挿入にだまされました。これを試して：

window.requestAnimFrame = function(){
    return (
        window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ callback){
            window.setTimeout(callback, 1000 / 60);
        }
    );
}();

returnjavascriptは、ステートメントの後ろにセミコロンを自動的に配置します。これは、改行が続き、次の行が有効な式であるためです。実際、次のように翻訳されます。

return;
window.requestAnimationFrame       || 
window.webkitRequestAnimationFrame || 
window.mozRequestAnimationFrame    || 
window.oRequestAnimationFrame      || 
window.msRequestAnimationFrame     || 
function(/* function */ callback){
    window.setTimeout(callback, 1000 / 60);
};

このコードはundefinedreturnを返し、returnステートメントの背後にあるコードを実行することはありません。です。window.requestAnimFrame_ undefinedで呼び出すとanimloop、javascriptはエラーを生成し、実行を停止します。式を括弧で囲むことにより、問題を解決できます。

JavaScriptの実行を検査するためにChrome開発者ツールまたはfirebugをお勧めします。これらのツールを使用すると、エラーが発生します。次のようにデバッグする必要があります（Chromeを想定しています）。

コードを実行します（予期しない結果が発生します）
開発ツールを開きます（右クリック->要素の検査）右側のステータスバーに赤いxが表示されます（これは実行にエラーがあることを意味します）
コンソールタブを開きます
あなたが見るでしょう
Uncaught TypeError：オブジェクト[オブジェクトDOMWindow]のプロパティ'requestAnimFrame'は関数ではありません
コンソールに次のwindow.requestAnimFrameように入力します。Enterキーを押すと、が表示されますundefined。requestAnimationFrameこれで、問題は実際には無関係であり、コードの最初の部分に集中する必要があることがわかりました。
今では、何かを返すところまでコードを絞り込む必要があります。これは難しい部分であり、この時点でまだ見つからない場合は、インターネットを利用してさらにサポートを受けることをお勧めします。

また、JavaScriptを書く際のいくつかの良い習慣については、このビデオをご覧ください。彼はまた、邪悪な自動セミコロン挿入についても言及しています。

score 8 · Accepted Answer

 /*
  Provides requestAnimationFrame in a cross browser way.
  http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 */

if (!window.requestAnimationFrame) {

    window.requestAnimationFrame = (function() {

        return window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
        window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {

                window.setTimeout(callback, 1000 / 60);

        };

    })();

}

animate();

function animate() {
    requestAnimationFrame(animate);
    draw();
}

function draw() {
    // Put your code here
}

以下の jsfiddle の例を見てください。私が言いたいことを明確に示しています。

http://jsfiddle.net/XQpzU/4358/light/

お役に立てれば！

score 0 · Accepted Answer

「スマートスロットリングにより、画面が変更を再描画できる回数を超えてイベントが発生することはありません。

var requestFrame = window.requestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   // polyfill - throttle fall-back for unsupported browsers
                   (function() {
                       var throttle = false,
                           FPS = 1000 / 60; // 60fps (in ms)
       
                       return function(CB) {
                         if( throttle ) return;
                         throttle = true;
                         setTimeout(function(){ throttle = false }, FPS);
                         CB(); // do your thing
                       }
                    })();

/////////////////////////////
// use case:

function doSomething() {
  console.log('fired');
}

window.onscroll = function() {
  requestFrame(doSomething);
};

html, body{ height:300%; }
body::before{ content:'scroll here'; position:fixed; font:2em Arial; }

javascript - requestAnimationFrame の使用方法

3 に答える 3

Related

Reference