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

JavaScriptで手動アニメーションと自動アニメーションを実装・使い分ける方法

手動アニメーション（Manual Animation）

手動アニメーションでは、アニメーションの処理は自動化されません。DOMオブジェクトのプロパティとJavaScriptの関数を組み合わせることで、シンプルなアニメーションを実装できます。以下の手順で構成されています。

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

サンプルコード

以下のコードを実行して、JavaScriptによるアニメーションの実装を試してみてください。

<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 = "Click Me" onclick = "moveRight();" />
      </form>
   </body>
</html>

この例では、ボタンを1回クリックするごとに画像が10ピクセル右へ動きます。つまり、ユーザーの操作（クリック）に応じてアニメーションが進むのが「手動アニメーション」です。

自動アニメーション（Automated Animation）

JavaScriptのsetTimeout()関数を使用すると、上記の処理を自動化できます。自動アニメーションでは、以下の点が追加されています。

  • moveRight()関数の中でsetTimeout()を呼び出し、20ミリ秒ごとに自分自身を再実行することで、imgObjの位置を連続的に更新しています。
  • 新たにstop()関数を追加しました。この関数は、clearTimeout()によってsetTimeout()で設定したタイマーを解除し、オブジェクトを初期位置に戻す役割を担います。

サンプルコード

以下のコードを実行して、JavaScriptによる自動アニメーションの実装を試してみてください。

<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
            var imgObj = null;
            var animate ;

            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';
               animate = setTimeout(moveRight,20); // call moveRight in 20msec
            }
            function stop(){
               clearTimeout(animate);
               imgObj.style.left = '0px';
            }
            window.onload =init;
         //-->
      </script>
   </head>
   <body>
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>下のボタンでアニメーションを操作できます</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
      </form>
   </body>
</html>

「Start」ボタンを押すと、setTimeout()による繰り返し処理によって画像が自動的に右へ移動し続けます。「Stop」ボタンを押すとタイマーが解除され、画像は初期位置へ戻ります。

まとめ

手動アニメーションはユーザーの操作ごとに位置を更新する方式、自動アニメーションはsetTimeout()によるタイマー処理で連続的に更新する方式です。用途に応じて両者を使い分けることで、インタラクティブなWebページを効率的に構築できます。なお、より高度なアニメーションが必要な場合は、requestAnimationFrame()やCSSアニメーションの活用も検討するとよいでしょう。

  1. JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説

    JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形 まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例 メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails

  2. JavaScriptで要素の表示・非表示を切り替える方法をわかりやすく解説

    Webページの開発では、ボタンのクリックに応じて特定の要素を表示したり非表示にしたりする「トグル（切り替え）処理」は非常によく使われるテクニックです。JavaScriptを使えば、style.displayプロパティの値を動的に変更することで、簡単にこの機能を実装できます。 本記事では、ボタンをクリックするたびにdiv要素の表示と非表示が切り替わるサンプルコードを紹介します。 実装のポイント 要素の表示・非表示の切り替えは、以下の手順で行います。 document.querySelector()で対象の要素を取得する addEventListener(click, ...)でボタンのクリック