2014-11-19

アニメーション

「アニメーション」とは、生命や魂を意味するラテン語の「ANIMA」を語源とする言葉
一般的に、本来静止している絵を生きてるかのように動かす技術
歴史的には、1830年代プラトーの作ったフェナキスティスコープや、ホーナーの考案したゾートロープまで遡ることができます

ジョセフ=プラトーのフェナキスティスコープ用円盤

この時代から現在に至るまで、アニメーションに利用される原理は変わらず、そのほとんどが間欠運動あるいは仮現運動と呼ばれる眼の残像効果を利用した錯視に基づいています。

いわゆる「パラパラ漫画」と同じ原理です。

【間欠運動】運動が時間とともに持続するのでなく、ある時間経過すると停止し、停止したのち、ふたたび運動が開始することを繰り返す運動

コンピュータが利用される以前は、これを透明のセルロイド板に描画することで実現していたため、「セルアニメーション」と呼ばれていました。

描画用シートは、その後不燃性のアセテートに変わりましたが、用語として使用されています。

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

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

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="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>
<inputtype="button"id="sBtn"value="スタート"onclick="startStop();">
</p>
</form>
<divid="car">
<imgsrc="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ピクセルを超えているかを判断し、そうであれば変数ｘを0に戻しています
if(x > 500){
    x = 0;
}
//setTimeoutメソッドで自分自身を呼び出すことで処理を繰り返しています
  timer = setTimeout('move()', INTERVAL);	
}
</script>

まとめ

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

DOMでアニメーション