JavaScript HTML DOM アニメーション

JavaScriptを使用してHTMLアニメーションを作成する方法を学びます。

基本ページ

JavaScriptでHTMLアニメーションを作成する方法を示すために、シンプルなウェブページを使用します：

インスタンス

<!DOCTYPE html>
<html>
<body>
<h1>私の初めてのJavaScriptアニメーション</h1>
<div id="animation">私のアニメーションはここにあります。</div>
</body>
</html>

アニメーションコンテナを作成

すべてのアニメーションはコンテナ要素に関連付けられています。

インスタンス

<div id ="container">
    <div id ="animate">私のアニメーションはここにあります。</div>
</div>

要素にスタイルを追加

style = "position: relativeでコンテナ要素を作成。

style = "position: absolute動画要素を作成。

インスタンス

#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}

自分で試してみる

アニメーションコード

JavaScript アニメーションは要素のスタイルを徐々に変更することでプログラミングされます。

この変更はカウンタを通じて呼び出されます。カウンタの間隔が小さいと、アニメーションが滑らかになります。

基本的なコードは：

インスタンス

var id = setInterval(frame, 5);
function frame() {
    if (/* テストが完了したか */) {
        clearInterval(id);
    } else {
         /* 要素のスタイルを変更するコード */
    }
}

JavaScriptでアニメーションを作成する

インスタンス

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

自分で試してみる