JavaScript リファレンス

Tweet

requestAnimationFrameメソッドはJavaScriptのアニメーションメソッドです。

Google ChromeやSafari / Firefox / IE10などのほか、iOS6のMobile Safariなどでも利用できます。

ただし、各ブラウザベンダがベンダープリフィックスをつけて採用しており利用するにはwindow.webkitRequestAnimationFrame()やwindow.mozRequestAnimationFrame()というように記述する必要があります。

クロスブラウザを考慮する場合は以下のように設定しておくとよいでしょう。

window.requestAnimationFrame = window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.msRequestAnimationFrame;

requestAnimationFrameメソッドでは引数でアニメーション用の関数を指定することでアニメーションさせることができます。

var i=0,box = document.getElementById("box");
function step() {
  i+=10;
  box.style.left = i + "px";
  if (i < 200) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);​​

requestAnimationFrameメソッドの動作サンプル

登録日 : 2012年09月20日 最終更新日 : 2012年9月20日

同じカテゴリー(アニメーション)のエントリー

• cancelAnimationFrame()
• animationStartTime
• requestAnimationFrame()