JavaScript リファレンス

Tweet

animationStartTimeプロパティはアニメーション用のタイムスタンプを返すメソッドです。

requestAnimationFrameメソッドと合わせて利用しますが、現在はFirefoxのみが試験的に導入しておりwindow.mozAnimationStartTimeとして取得します。

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

animationStartTime = window.mozAnimationStartTime || (new Date).getTime ();

次のサンプルではrequestAnimationFrameメソッドのtimestampとanimationStartTimeを比較し速度の調整を行っています。

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

var box = document.getElementById("box");

animationStartTime = window.mozAnimationStartTime || (new Date).getTime ();
    
function step(timestamp) {
  var progress = timestamp - animationStartTime; 
  box.style.left = Math.min (progress/5, 800) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);​​​

animationStartTimeプロパティの動作サンプル

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

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

• cancelAnimationFrame()
• animationStartTime
• requestAnimationFrame()