0

私はHTML5が初めてで、基本的にここにあるものと同様のコード構造を使用しています http://www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/

Paul Irish によると、requestAnimationFrame() が使用されている場合、タブを切り替えるとアニメーションが自動的に一時停止します。

http://www.paulirish.com/2011/requestanimationframe-for-smart-animation/

しかし、最初の例では一時停止せずに動き続け、ブラウザーのタブを切り替えると消えることもあります。アニメーションが完全に機能する傾向がある例を見つけました。

http://jsfiddle.net/wMkJg/

タブの切り替え時にアニメーションが継続しないようにコードを変更するにはどうすればよいですか?

function animate(lastTime, myRectangle, runAnimation, canvas, context) {

                if(runAnimation.value) {
                  // update
                  var time = (new Date()).getTime();
                  var timeDiff = time - lastTime;

                  // pixels / second
                  var linearSpeed = 100;
                  var linearDistEachFrame = linearSpeed * timeDiff / 1000;
                  var currentX = myRectangle.x;

                  if(currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
                    var newX = currentX + linearDistEachFrame;
                    myRectangle.x = newX;
                  }

                  // clear
                  context.clearRect(0, 0, canvas.width, canvas.height);

                  // draw
                  drawRect(myRectangle, context);

                  // request new frame
                  requestAnimFrame(function() {
                    animate(time, myRectangle, runAnimation, canvas, context);
                  });


        }
}
4

1 に答える 1

3

rAF の動作は定義されていません。一部のブラウザでは一時停止する場合があり、他のブラウザではフレーム レートが低下する場合がありますが、これは標準では定義されていません。

ウィンドウでフォーカス イベントとブラー イベントを使用して、ループで使用できるフラグを設定できます。

var isPaused = false;

window.onblur = function() {
    isPaused = true;
}
window.onfocus = function() {
    isPaused = false;
    animate(...);     /// start the loop (or use rAF here too)
}

そして、あなたのループで：

requestAnimFrame(function() {
    if (!isPaused) animate(time, myRectangle, runAnimation, canvas, context);
});
于 2013-11-12T21:12:30.753 に答える