DOMでアニメーション

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

  • 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;
  width: 150px;  //オブジェクトの幅
  height: 70px;  //オブジェクトの高さ
}
</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>


ボタンとオブジェクトを用意する

  • フォームにはID名が「sBtn」に設定されたボタンを用意します
  • ID名が「car」というdiv要素に、「150 x 70 px」の車の画像が配置されています

スタイルシートで初期位置を設定する

  • head要素内の「script」要素に、div要素「car」の初期位置と幅・高さを設定します

イベントハンドラを追加する

  • フォームのボタンに「onclick」イベントハンドラを追加し、クリックされると「move」関数を呼び出します

move関数を定義する

  • 「move」関数を定義します

プログラムを実行する

  • プログラムを実行します
  • 車が5pxずつ右に動いていきます
  • 500px以上進むと左端に戻ります

アニメーションを停止する

  • フォームのボタンをクリックすると、アニメーションが停止しするように、新たに「startStop」関数を定義します
  • ボタンの「onclick」イベントハンドラから、「startStop」関数を呼びだします
アニメーションの実行

leftプロパティ

  • スタイルシートのleftプロパティに値を代入すると、エレメントのウィンドウ左端からの位置をピクセル数で指定できます
  • 値には「px」が必要
  • 例えば、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ピクセルを超えているかを判断し、そうであれば変数xを0に戻しています
  if (x > 500) {
    x = 0;
  }
//setTimeoutメソッドで自分自身を呼び出すことで処理を繰り返しています
  timer = setTimeout( 'move()', INTERVAL );	
}
</script>

まとめ

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