1

HTML5キャンバスとJavascriptを使用してアニメーションを作成しようとしています。私はJavascriptについての予備知識がほとんどありません。アニメーションの最初の部分は、エッジが十字に触れるまで円を「成長」させることです。次に、十字架は円の端に沿って移動します。個々に、これらの部分は正常に機能しますが、私が使用しているようにsetInterval()、両方のアニメーションは、最初のアニメーションが終了するのを待ってから2番目のアニメーションを開始するのではなく、同時に再生されます。

これを行う最も簡単な方法は何でしょうか？HTMLボタンを使用できれば幸いですが、<button onclick="setInterval(aRot,30);">Next Step</button>機能しないようです。

私の「ひどい」コードのodgepodgeはhttp://jsfiddle.net/jtYkN/12/で見ることができます

4

1 に答える 1

1

まず、setInterval ではなくrequestAnimationFrameを使用する必要があります。アニメーション用に特別に作られています。ポール・アイリッシュによると..

なぜ使用する必要があるのですか？

ブラウザーは、同時実行アニメーションを単一のリフローおよび再描画サイクルにまとめて最適化し、より忠実度の高いアニメーションを実現できます。たとえば、CSS トランジションまたは SVG SMIL と同期した JS ベースのアニメーション。さらに、表示されていないタブでアニメーション ループを実行している場合、ブラウザーはそれを実行し続けません。つまり、CPU、GPU、およびメモリの使用量が少なくなり、バッテリー寿命が大幅に長くなります。

あなたが話していることを実装する方法は次のとおりです

// all credit to paul irish on this part
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


function growCircle () {
  // code to make the circle bigger
}


function rotateCross() {
  // code to make the cross rotate
}

(function animate(){
  requestAnimFrame(animate);
  if ( /* code to tell if the circle has finished growing */ ) {
    rotateCross();
  } else {
    growCircle();
  }
})();
于 2012-07-10T15:54:12.463 に答える