第三の修練

* JavaScript: アニメーションの基本

JavaScriptでのアニメーションを少しだけやったので、忘れないうちにエントリ。基本はsetTimeout or setIntervalを使って、少しづつ位置を変えていく。

var elem_id = "hogehoge"; // HTML要素のID
var flames  = 30;         // コマ数
var perSize = 10;         // 1コマでの移動距離
var perTime = 30;         // 1コマの時間

/* 30コマ分の処理をsetTimeoutで登録 */
for (var i=1; i<=flames; i++) {
  setTimeout("document.getElementById('"+elem_id+"').style.left = document.getElementById('"+elem_id+"').offsetLeft + perSize + \"px\";", perTime*i);
}

加速度的に移動スピードを上げていきたいとかはココに参考になるのがあります。