4

これが私の状況です。関数の実行時間を高速化する必要があるため、setInterval は賢明な選択ではありません。毎回少なくとも4msのコストがかかるためです。

それで、setInterval関数をrequestAnimationFrameに変更してもいいのですが、requestAnimationFrameの仕組みがよくわかりません。

例えば

// some code here
var interval = setInterval(doSomething, 10)
var progress = 0
function doSomething(){
    if (progress != 100){
        // do some thing here
    }else{
        clearInterval(interval)
    }
}

どうすればrequestAnimationFrameを適用できますか?

4

2 に答える 2

-1

フィドルで見栄えが良くなります->コードのみ、アニメーションなし

簡素化のために、コード内ですべてのことがコメント化されています。setInterval を使用する必要はありません。間隔をクリアすると思われる場合は、 cancelAnimationFrame を使用してください。

 // This makes sure that there is a method to request a callback to update the graphics for next frame

var requestAnimationFrame =
        window.requestAnimationFrame ||       // According to the standard
        window.mozRequestAnimationFrame ||    // For mozilla
        window.webkitRequestAnimationFrame || // For webkit
        window.msRequestAnimationFrame ||     // For ie
        function (f) { window.setTimeout(function () { f(Date.now()); }, 1000/60); }; // If everthing else fails

var cancelAnimationFrame =
        window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.msCancelAnimationFrame;

// your code here

var progress = 0;

function doSomething() {
    if (progress != 100) {
        // do something here
        var myAnimation = requestAnimationFrame(doSomething); 
    } else {
        // don't use clearInterval(interval) instead when you know that animation is completed use cancelAnimationFrame()
        cancelAnimationFrame(myAnimation);
    }        
}

読む価値のあるいくつかのリンク -->

  1. CreativeJs---誰でもできる最高の説明、すべての初心者は読む必要があります
  2. アニメーション フレームのキャンセル
  3. リンク 3->質問のコンテキストで
  4. 私はこのフィドルをグーグルで見つけました。あなたが望むものとまったく同じです。

その他の知っておくべきこと:

于 2013-07-27T19:36:41.897 に答える