4

キャンバスを斜め方向に横切る円をアニメートしようとしています。requestanimationframeを使用しています。すべてのブラウザでスムーズに動作しますが、Firefoxでは動作しません。アニメーションの進行中は常にちらつきがあります。誰かが私が何をしているのか教えてください。Firefoxで少なくとも妥当な速度のスムーズなアニメーションが必要です。

これが私の簡単なコードです、多分誰かが私がここで欠けているものを指摘することができます..：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
/*html { background: #000; }*/
</style>

<title>Test</title>
</head>

<body>
<script type="text/javascript">

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

window.cancelRequestAnimFrame = ( function() {
    return window.cancelAnimationFrame          ||
        window.webkitCancelRequestAnimationFrame    ||
        window.mozCancelRequestAnimationFrame       ||
        window.oCancelRequestAnimationFrame     ||
        window.msCancelRequestAnimationFrame        ||
        clearTimeout
} )();  

var canvas, context, toggle;
var ctr = 0;
var request;

var x = 10;
var y = 10;


init();
animate();

function init() {

    canvas = document.createElement( 'canvas' );
    canvas.width = 512;
    canvas.height = 512;

    context = canvas.getContext( '2d' );

    document.body.appendChild( canvas );

}

function animate() {


    request = requestAnimFrame( animate );
    draw();

}

function draw() {

  context.clearRect(0,0,canvas.width,canvas.height);
  y+=2;
  x+=2;

  context.beginPath();
  context.arc(x, y, 3, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#003300';
  context.stroke();

    //cancelRequestAnimFrame(request); 

}

</script>

</body>
</html>
4

1 に答える 1

2

コードには、修正が必要な 2 つの点があります。

まず、新しいrequestAnimationFrameポリフィルを試してください。

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelRequestAnimationFrame = window[vendors[x]+
          'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}())

詳細な説明については、次の記事を参照してください: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animationing

2 つ目は、あるタイム スタンプと次のタイム スタンプの間の差分を計算する必要があることです。レンダリングの反復ごとに1ずつ増加した固定値で作業しています。お使いのブラウザはペースについていけないため、1 つまたは 2 つのフレームがスキップされることがあります。これにより、スムーズな時間が得られます。

これは、デルタ時間を計算する方法です。

end = Date.now();
delta = ( end - start ) / 1000.0 * 60;
end = start;

http://jsfiddle.net/p5c6c/1/

于 2013-02-04T09:25:37.787 に答える