Edited at

jsアニメーションメモ

More than 5 years have passed since last update.


タイマー


setInterval

一定間隔ごとに繰り返し処理する。

setInterval("func()",1000);

第一引数:「関数名 + ( )」 をクオーテーションで閉じたもの(ここ間違えるとバグになるかも)

第二引数:間隔 (ミリ秒)

注意:返り値はタイマーのid (数値)で、clearIntervalメソッドで使える

var timerId = setInterval("func()",1000);

・・・・
clearInterval(timerId);


setTimeout

一定時間後に、一度だけ関数を実行

setTimeout("func()",1000);

上と同様に crearTimeout()関数をつかう


アニメーション

やることの確認


  • setIntervalで関数を10 〜100ミリ間隔で実行

  • 呼ばれる関数内で座標を取得

  • 座標を足す

  • 反映

コードスニペット

<img src="ここにパスをいれて" width="200" id="imageId" style="position:absolute;">

position:absoluteはわすれないでね!(これが無いとスタイル属性で位置を設定できない)

setInterval("move()",50);   //呼ぶのは一回だけでいい

・・・・
var elem = document.getElementById('imageId');//idは任意
・・・・
function move(){
console.log("move"); //呼ばれているか確認する
var left = elem.offsetLeft; //型:数値
var top = elem.offsetTop;
left = left + 10;
top = top + 10;
elem.style.left = left + "px";
elem.style.top = top + "px";
}


サンプル

デモ