JavaScript-アニメーション

JavaScriptを使用して、次の要素を含むがこれらに限定されない複雑なアニメーションを作成できます-

花火
フェード効果
ロールインまたはロールアウト
ページインまたはページアウト
オブジェクトの動き

既存のJavaScriptベースのアニメーションライブラリに興味があるかもしれません：link：/script.aculo.us/scriptaculous_effects [Script.Aculo.us]。

このチュートリアルでは、JavaScriptを使用してアニメーションを作成する方法の基本的な理解を提供します。

JavaScriptを使用して、論理式または関数によって決定される何らかのパターンに従って、ページ内で多数のDOM要素（<img/>、<div>またはその他のHTML要素）を移動できます。

JavaScriptは、アニメーションプログラムで頻繁に使用される次の2つの関数を提供します。

* setTimeout（function、duration）-この関数は、 *duration ミリ秒後に function を呼び出します。
* setInterval（function、duration）-この関数は、 *duration ミリ秒ごとに function を呼び出します。
* clearTimeout（setTimeout_variable）*-この関数呼び出しは、setTimeout（）関数によって設定されたタイマーをクリアします。

JavaScriptは、画面上の位置など、DOMオブジェクトの多くの属性を設定することもできます。オブジェクトの_top_およびleft属性を設定して、画面上の任意の場所に配置できます。構文は次のとおりです。

//Set distance from left edge of the screen.
object.style.left = distance in pixels or points;

or

//Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

手動アニメーション

次のように、DOMオブジェクトプロパティとJavaScript関数を使用して、1つの単純なアニメーションを実装しましょう。次のリストには、さまざまなDOMメソッドが含まれています。

JavaScript関数* getElementById（）を使用してDOMオブジェクトを取得し、それをグローバル変数 *imgObj に割り当てています。
初期化関数* init（）を定義して *imgObj を初期化し、その position および left 属性を設定しました。
ウィンドウのロード時に初期化関数を呼び出しています。
最後に、* moveRight（）*関数を呼び出して、左距離を10ピクセル増やします。負の値に設定して、左側に移動することもできます。

例

次の例を試してください。

<html>
   <head>
      <title>JavaScript Animation</title>
      <script type = "text/javascript">
         <!--
            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>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();"/>
      </form>
   </body>
</html>

出力

自動アニメーション

上記の例では、クリックするたびに画像が右に移動する様子を見ました。次のようにJavaScript関数* setTimeout（）*を使用して、このプロセスを自動化できます-

ここにメソッドを追加しました。ここで何が新しくなったか見てみましょう-

* moveRight（）関数は_imgObj_の位置を設定するために setTimeout（）*関数を呼び出しています。
* setTimeout（）関数で設定されたタイマーをクリアし、オブジェクトを初期位置に設定する新しい関数 stop（）*を追加しました。

例

次のサンプルコードを試してください。

<html>
   <head>
      <title>JavaScript Animation</title>
      <script type = "text/javascript">
         <!--
            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>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();"/>
         <input type = "button" value = "Stop" onclick = "stop();"/>
      </form>
   </body>
</html>

マウスイベントでのロールオーバー

これは、マウスイベントでの画像のロールオーバーを示す簡単な例です。

次の例で使用しているものを見てみましょう-

このページの読み込み時に、「if」ステートメントは画像オブジェクトの存在を確認します。画像オブジェクトが利用できない場合、このブロックは実行されません。
* Image（）コンストラクターは、 *image1 という新しい画像オブジェクトを作成してプリロードします。
srcプロパティには、/images/html.gifと呼ばれる外部画像ファイルの名前が割り当てられます。
同様に、 image2 オブジェクトを作成し、このオブジェクトに/images/http.gifを割り当てました。
＃（ハッシュマーク）はリンクをクリックし、ブラウザがクリックされたときにURLにアクセスしようとしないようにします。このリンクは画像です。
ユーザーのマウスがリンク上に移動すると onMouseOver イベントハンドラーがトリガーされ、ユーザーのマウスがリンク（画像）から離れると onMouseOut イベントハンドラーがトリガーされます。
マウスが画像上を移動すると、HTTP画像は最初の画像から2番目の画像に変わります。マウスを画像から遠ざけると、元の画像が表示されます。
マウスをリンクから遠ざけると、初期画像html.gifが画面に再表示されます。

<html>

   <head>
      <title>Rollover with a Mouse Events</title>

      <script type = "text/javascript">
         <!--
            if(document.images) {
               var image1 = new Image();    //Preload an image
               image1.src = "/images/html.gif";
               var image2 = new Image();    //Preload second image
               image2.src = "/images/http.gif";
            }
        //-->
      </script>
   </head>

   <body>
      <p>Move your mouse over the image to see the result</p>

      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif"/>
      </a>
   </body>
</html>

Javascript-animation

目次

JavaScript-アニメーション

手動アニメーション

例

出力

自動アニメーション

例

マウスイベントでのロールオーバー