JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで基本的なアニメーションを実装する方法をわかりやすく解説

JavaScriptで基本的なアニメーションを実装するには、DOMオブジェクトのプロパティとJavaScriptを組み合わせて使用します。ここでは、ボタンをクリックすると画像が右へ移動するシンプルなアニメーションを例に、その実装手順を解説します。

実装のポイント

  • JavaScriptのgetElementById()関数を使ってDOMオブジェクトを取得し、グローバル変数imgObjに代入します。
  • 初期化用の関数init()を定義し、その中でimgObjのposition属性とleft属性を設定します。
  • ウィンドウの読み込み完了時に、この初期化関数を呼び出します。
  • 最後にmoveRight()関数を呼び出し、leftの値を10ピクセルずつ増加させます。負の値を設定すれば、画像を左方向へ移動させることも可能です。

サンプルコード

<html>
    <head>
        <title>JavaScript Animation</title>
        <script>
            <!--
            var imgObj = null;
            function init() {
                imgObj = document.getElementById('myImage');
                imgObj.style.position = 'relative';
                imgObj.style.left = '0px';
            }
            function moveRight() {
                imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            window.onload = init;
            //-->
        </script>
    </head>
    <body>
        <form>
            <img id="myImage" src="/images/html.gif" />
            <p>下のボタンをクリックすると画像が右へ移動します</p>
            <input type="button" value="クリック" onclick="moveRight();" />
        </form>
    </body>
</html>

コードの解説

まず、window.onloadによってページ読み込み時にinit()が実行され、id属性が「myImage」の画像要素が取得されます。続いて、画像のpositionを「relative」に設定することで、leftプロパティによる位置指定が可能になります。

ボタンがクリックされるとmoveRight()が呼び出され、現在のleftの値（parseIntで数値化）に10ピクセルを加算した値が再設定されます。これにより、クリックするたびに画像が少しずつ右へ動いていく仕組みです。

なお、より滑らかな連続アニメーションを実現したい場合は、setInterval()やrequestAnimationFrame()と組み合わせてmoveRight()を繰り返し呼び出す方法も有効です。

  1. JavaScriptでポリモーフィズムを実装する方法｜プロトタイプ継承とオーバーライドの基本

    ポリモーフィズム（多態性）とはポリモーフィズムは、オブジェクト指向プログラミング（OOP）の基本原則のひとつです。共通のインターフェースを持ちながら、オブジェクトごとに異なる振る舞いを実現できる設計手法であり、継承の仕組みを活用することで実現します。これにより、同じメソッドを呼び出しても、オブジェクトの種類に応じて異なる処理を実行させることができます。次の例では、子オブジェクトである「cricket」と「tennis」が、親オブジェクト「game」のselectメソッドをオーバーライドし、それぞれ固有の文字列を返しています。一方、子オブジェクト「football」はselectメソッドをオーバ

  2. JavaScriptで非同期ループを実装する方法をわかりやすく解説

    JavaScriptでは、async/awaitとPromiseを組み合わせることで、各処理の完了を待ちながら繰り返しを実行する「非同期ループ」を実装できます。通常のループ内で時間のかかる処理(API通信やタイマー処理など)を順番に実行したい場合に非常に便利です。以下は、JavaScriptで非同期ループを実装するコード例です。コード例<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="vi