DOMを使ってアニメーション

スタイルシートでは、要素の表示位置をtop(上端)left(左端)といったプロパティで設定できます。要素の配置方法を指定するpositionプロパティは、初期値であるレイアウトを自動で行static以外に設定する必要があります。

absoluteに設定した場合は、ウィンドウの左上隅(div要素などで入れ子のなっている場合は親要素)を基準とする座標で指定できます。

DOMを使用すると、topやleftプロパティを変更することによって、要素の表示位置をプログラムから変更することができます。以前の記事で触れたタイマー機能を使い、プロパティの値を徐々に変更することで要素が移動するアニメーションが作成できます。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOMを使いアニメーションを作成する</title>
    <style>
    #photo{
        position:absolute;
        top:100px;
        left:0px;
        width:320px;
        height:180px;
    }
    </style>

<script>
    /*
    move関数の内のsetTimeout関数にて、
    move関数を呼び出す間隔：今回は16/1000秒の間隔です。
    */
    var INTERVAL = 16;
    
    //画像の初期位置
    var x = 0;
    
    /*
    アニメーションを行っているか否かを判定する
    true :アニメーション実行中
    false:アニメーション停止中
    */
    var fAnimation = false;
    
    //タイマーID
    var timer;

function move(){

    var photo = document.getElementById("photo");
    
    /*
        値を５加算して、
        ID「photo」のleftプロパティの値に
        代入している
    */
    x = x + 5;
    photo.style.left = x + "px";
    
    /*
    現在位置が左から481px以上離れたなら
    xに0を代入する。
    */
    if( x > 480 ) x = 0;
    
    /*
        setTimeoutメソッドで自分自身を呼び出すことを
        繰り返しています。呼び出す間隔を変更したい場合は
        変数INTERVALの値を変更する
    
    */
    timer = setTimeout("move()",INTERVAL);
}
function startStop(){
    
    if( fAnimation ){
        //アニメーション実行中
        
        //タイマー停止
        clearTimeout(timer);
        
        //ボタンのテキストを「START」へ変更
        document.getElementById("startBtn").value = "START";
    }else{
        //アニメーション停止中
        
        //ボタンのテキストを「STOP」へ変更
        document.getElementById("startBtn").value = "STOP";

        //アニメーションを開始
        move();
    }
    /*
    アニメーションを停止中なら実行中、
    アニメーションを実行中なら停止中に
    切り替える。
    */
    fAnimation = !fAnimation;
} 
</script>    
</head>
<body>
<form><p>
    <input type="button" id="startBtn" value="START" 
           onclick="startStop();">
</p></form>
        
<div id="photo">
    <img src="img/0.JPG">
</div>
    
</body>
</html>

100

101

<!doctype html>

<html>

<head>

<title>DOMを使いアニメーションを作成する</title>

<style>

#photo{

position:absolute;

top:100px;

left:0px;

width:320px;

height:180px;

}

</style>

move関数の内のsetTimeout関数にて、

move関数を呼び出す間隔：今回は16/1000秒の間隔です。

var INTERVAL = 16;

//画像の初期位置

var x = 0;

アニメーションを行っているか否かを判定する

true :アニメーション実行中

false:アニメーション停止中

var fAnimation = false;

//タイマーID

var timer;

function move(){

var photo = document.getElementById("photo");

値を５加算して、

ID「photo」のleftプロパティの値に

代入している

x = x + 5;

photo.style.left = x + "px";

現在位置が左から481px以上離れたなら

xに0を代入する。

if( x > 480 ) x = 0;

setTimeoutメソッドで自分自身を呼び出すことを

繰り返しています。呼び出す間隔を変更したい場合は

変数INTERVALの値を変更する

timer = setTimeout("move()",INTERVAL);

}

function startStop(){

if( fAnimation ){

//アニメーション実行中

//タイマー停止

clearTimeout(timer);

//ボタンのテキストを「START」へ変更

document.getElementById("startBtn").value = "START";

}else{

//アニメーション停止中

//ボタンのテキストを「STOP」へ変更

document.getElementById("startBtn").value = "STOP";

//アニメーションを開始

move();

}

アニメーションを停止中なら実行中、

アニメーションを実行中なら停止中に

切り替える。

fAnimation = !fAnimation;

}

</script>

</head>

<body>

<input type="button" id="startBtn" value="START"

onclick="startStop();">

</p></form>

</div>

</body>

</html>

サンプルコードについて

コード上にコメントを入れましたので、そちらをご覧ください。