JavaScript リファレンス

Tweet

cancelAnimationFrameメソッドはrequestAnimationFrameメソッドで動いているアニメーションを停止させるメソッドです。

requestAnimationFrameメソッドと同じく、各ブラウザベンダがベンダープリフィックスをつけて採用しており利用するにはwindow.webkitCancelAnimationFrame()やwindow.mozCancelAnimationFrame()というように記述する必要があります。

クロスブラウザを考慮するなら以下のように設定すると良いでしょう。

window.cancelAnimationFrame = window.cancelAnimationFrame ||
  window.mozCancelAnimationFrame ||
  window.webkitCancelAnimationFrame ||
  window.msCancelAnimationFrame;

cancelAnimationFrameメソッドはrequestAnimationFrameメソッドの返り値を引数に与えることでアニメーションが停止されます。

次のサンプルではstopボタンが押された際にアニメーションを停止しています。

var timer,i=0,box = document.getElementById("box");
function step() {
  i+=2;
  box.style.left = i + "px";
  if (i < 400) {
    timer = requestAnimationFrame(step);
  }
}
timer = requestAnimationFrame(step);
 
document.getElementById("stop").onclick = function(){
    if(timer)cancelAnimationFrame(timer);
}​​​​​​​​​

cancelAnimationFrameメソッドのサンプル

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

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

• cancelAnimationFrame()
• animationStartTime
• requestAnimationFrame()