アニメーション - web-0127のブログ

エレメントの位置を変更する

DOMを使用したアニメーション
エレメントの表示位置を、top（上端）、left（左端）プロパティで設定します
エレメントの配置位置を、positionプロパティでデフォルト設定値「static」以外に設定しておく

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アニメーション</title>
<style>
#car {
  position: absolute; /* ブラウザ左上を基準 */
  top: 150px;
  left: 0;
  height: 70px;
  width: 150px;
}
</style>
<script>
var INTERVAL = 10;  //アニメーションの間隔（msec）
var x =0;  //X座標
var animating = false;  //アニメーションを実行中かどうか
var timer;  //タイマーID

function move(){
  aCar =  document.getElementById('car');	
  x = x + 5;
  aCar.style.left = x + 'px';
  if (x > 500) {
    x = 0;
  }
  timer = setTimeout('move()', INTERVAL);	
}

function startStop(){	
  if (animating) {
    clearTimeout(timer);
    document.getElementById('sBtn').value = 'スタート';
  } else {
    document.getElementById('sBtn').value = 'ストップ';
    move();
  }
  animating = !animating;
}
</script>
</head>
<body>
<h1>DOMによるアニメーション</h1>
<form>
<p>
<input type="button" id="sBtn" value="スタート" onclick="startStop();">
</p>
</form>
<div id="car">
<img src="img/car.jpg">
</div>
</body>
</html>

leftプロパティ

スタイルシートのleftプロパティに値を代入すると、エレメントのウィンドウ左端からの位置をピクセル数で指定できます

aCarというノードの左端の座標を50ピクセルにする

aCar.style.left = '50px';

move関数

車の座標を5ピクセルずつ右に動かすという処理を、タイマーを使って自分自身を繰り返し呼び出すことで実行

<script>
function move(){
  aCar =  document.getElementById('car');	
//5を増加
  x = x + 5;
//leftプロパティに代入することで車を右に5ピクセル進める
  aCar.style.left = x + 'px';
//if文では、現在位置が左から500ピクセルを超えているかを判断し、そうであれば変数ｘを0に戻しています
  if (x > 500) {
    x = 0;
  }
//setTimeoutメソッドで自分自身を呼び出すことで処理を繰り返しています
  timer = setTimeout('move()', INTERVAL);	
}
</script>

まとめ

style.leftプロパティ：エレメントの左端の座標を設定する
アニメーションを行うには、タイマーを利用する