15

だから、多分ここで完全な頭脳。の構文setInterval()はかなり明確です。xミリ秒ごとに何かを実行します。これは、どのように使用するのが最適requestAnimationFrame()ですか？

約300個のオブジェクトがあり、それぞれが特定の間隔（8、6、2など秒ごと）でアニメーションシーケンスを実行することになっていますか？requestAnimationFrame()1秒間に約60回呼び出されるを使用して、これを最もよく達成するにはどうすればよいですか？おそらく簡単な答えがあります、私はただ、私の人生のために、それを理解することはできません。

4

2 に答える 2

11

requestAnimationFrameを特定のFPSに固定するように強制するには、両方を同時に使用できます。

var fps = 15;
function draw() {
    setTimeout(function() {
        requestAnimationFrame(draw);
        // Drawing code goes here
    }, 1000 / fps);
}

少し奇妙ですが、世界で最も紛らわしいことではありません。

最後の呼び出しからの時間差に基づいて更新する必要があるオブジェクトを描画するために、FPSではなく経過時間でrequestAnimationFrameを使用することもできます。

var time;
function draw() {
    requestAnimationFrame(draw);
    var now = new Date().getTime(),
        dt = now - (time || now);
 
    time = now;
 
    // Drawing code goes here... for example updating an 'x' position:
    this.x += 10 * dt; // Increase 'x' by 10 units per millisecond
}

これらの2つのスニペットは、追加の詳細が含まれているこのすばらしい記事からのものです。

ちなみに良い質問です！私もこれがSOで答えられるのを見たことがないと思います（そして私はここにあまりにも多くいます）

于 2012-08-14T02:20:12.437 に答える
10

requestAnimationFrameはかなり低レベルですが、すでに言ったことを実行します。おおよそ60 fpsで呼び出されます（ブラウザがそのペースに追いつくことができると仮定します）。したがって、通常は、ゲームループを持つゲームエンジンのように、その上に何かを構築する必要があります。

私のゲームエンジンでは、これがあります（ここではパラフェーズ/簡略化されています）：

window.requestAnimationFrame(this._doFrame);

...

_doFrame: function(timestamp) {
     var delta = timestamp - (this._lastTimestamp || timestamp);

     for(var i = 0, len = this.elements.length; i < len; ++i) {
         this.elements[i].update(delta);
     }

     this._lastTimestamp = timestamp;

     // I used underscore.js's 'bindAll' to make _doFrame always
     // get called against my game engine object
     window.requestAnimationFrame(this._doFrame);
 }

次に、私のゲームエンジンの各要素は、自分自身を更新する方法を知っています。あなたの場合、2、6、8秒ごとに更新する必要がある各要素は、経過した時間を追跡し、それに応じて更新する必要があります。

update: function(delta) {
     this.elapsed += delta;

     // has 8 seconds passed?
     if(this.elapsed >= 8000) {
          this.elapsed -= 8000;  // reset the elapsed counter
          this.doMyUpdate(); // whatever it should be
     }
 }

Canvas APIrequestAnimationFrameはかなり低レベルであり、アニメーションやゲームエンジンなどの構成要素です。可能であれば、cocos2d-jsなどの既存のものを使用しようと思います。

于 2012-08-13T22:25:25.377 に答える