ES6-アニメーション

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

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

この章では、JavaScriptを使用してアニメーションを作成する方法について説明します。

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

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

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

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

//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 に割り当てています。
位置と左の属性を設定したimgObjを初期化する初期化関数* init（）*を定義しました。
ウィンドウのロード時に初期化関数を呼び出しています。
左距離を10ピクセル増やすために* moveRight（）*関数を呼び出しています。負の値に設定して、左側に移動することもできます。

例

次の例を試してください

<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（）*関数は、imgTimeoutの位置を設定するために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>

上記のコードが正常に実行されると、次の出力が表示されます。

Es6-animation

目次

ES6-アニメーション

手動アニメーション

例

自動アニメーション

例

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