Animation

JavaScript のアニメーションです。
ソースコードは、右クリックからソースの表示(V)を選んで下さい。
Microsoft Edge では「F12キー」を押すとソースコードを確認することが出来ます。
  1. Click Chenge


    1. マウスのクリックでアニメーション画像を切り替えます。
      【click_chenge.html】
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-16">
      <title>Click Chenge</title>
      
      <script type="text/javascript">
      <!--
      num = 0;    //現在の画像
      window.onmousedown = mousedown;
      function mousedown()
      {   num = (num+1)%2;
          document.anime.src= "anime" + (num+1) + ".gif";
      }
      // -->
      </script>
      </head>
      
      <body>
      <h1>Click でアニメーション画像を切り替える</h1>
      <img src="anime1.gif" name="anime"><br>
      
      </body>
      </html>
      
    2. 単純な繰り返しのアニメーションなら animation gif の画像を使うと簡単です。
      animation gif の描画は 3枚の画像を描画 を参照して下さい。
      今回はマウスのクリックで animation gif の画像を切り替えます。
      アニメーション画像を切り替える手法は [歩く/走る/ジャンプ] や [イベント] が発生した場合などに使います。
    3. window.onmousedown = mousedown; で、マウスがクリックされたとき mousedown 関数を呼び出します。
      num は現在描画中の画像番号で、クリックする毎に 0 と 1 を切り替えます。
      document.anime.src= "anime" + (num+1) + ".gif"; で、"anime" が設定された画像を切り替えます。
      document.anime は img タグに設定された name="anime" の画像を指します。
      Animation Start/Stop のようにインデックス(document.images[0]) で指定することも出来ます。
      num = 0;    //現在の画像
      window.onmousedown = mousedown;
      function mousedown()
      {   num = (num+1)%2;
          document.anime.src= "anime" + (num+1) + ".gif";
      }
      
    4. <body> では img タグで "anime1.gif" の画像を表示します。
      name= に "anime" を設定して下さい。
      mousedown() 関数から name に "anime" が設定された画像の src を切り替えます。
      <img src="anime1.gif" name="anime"><br>
      

  2. パラパラアニメーション


    1. 少女のパラパラアニメーションです。
      "girl.css" をリンクして <img class="girl"> で表示するだけです。
      【css_girl.html】
      <head>
      <meta charset="UTF-16">
      <title>Parapara Animation</title>
      <link rel="stylesheet" href="girl.css">
      </head>
      
      <body>
      <img class="girl">
      
      </body>
      </html>
      
    2. 少女のアニメーションに組み込む "girl.css" です。
      【"girl.css" Source Code】
      .girl
      {
        width:128px;
        height:216px;
        margin:1em auto;
        overflow:hidden;
        background:url(girl.gif);
        animation:girl 1.0s steps(6,end) infinite;
      }
      @keyframes girl
      {
        100% {background-position:-768px;}
      }
      
    3. このページは Internet Explorer11 で実行を確認しました。
      2017/09/12 Microsoft Edge でも実行を確認しました。
      実行環境によっては、動かないかも知れません。 (^_^;)
    4. css_girl.html では link で "girl.css" をリンクします。
      "girl.css" は css_girl.html と同じフォルダに格納して下さい。
    5. "../img/girl.gif" は 128*216 の Sprite が横に7枚並んだ画像です。
      width, height で Sprite のサイズを設定します。
      1.0 秒がアニメーションを再生するスピードです。
      steps(6,end) が Sprite の最後の番号(7枚目)です。
      background-position:-768px; は7枚目の Sprite の左端座標です。
      非常に簡単なソースですが、後は全て JavaScript が面倒を見てくれます。
    6. animation: の行を次のように修正して下さい。
      再生されるスピードを 2.0 秒にして、一度だけ実行します。
        animation:girl 2.0s steps(6,end);
      

  3. Click Animation


    1. マウスのクリックで5枚の画像を順に切り替えます。
      【click_anime.html】
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-16">
      <link rel="stylesheet" href="javascript.css" type="text/css">
      <title>Click Animation</title>
      
      <script type="text/javascript">
      <!--
      num = 0;    //現在の画像
      window.onmousedown = mousedown;
      function mousedown()
      {   num = (num+1)%5;
          document.anime.src= "../img/dog"+num+".gif";
      }
      // -->
      </script>
      </head>
      
      <body>
      <h1>Javascript で Click Animation</h1>
      マウスのクリックで5枚の画像を順に切り替えます。<br>
      <img src="../img/dog0.gif" name="anime"><br>
      
      <p>Mouse Click</p>
      
      </body>
      </html>
      
    2. マウスのクリックで "../img/dog0.gif" ~ "../img/dog4.gif" の5枚の画像を順に切り替えます。
      window.onmousedown = mousedown; で、マウスがクリックされたとき mousedown 関数を呼び出します。
      num は現在描画中の画像番号で、クリックする毎に 0~4 を繰り返します。
      document.anime.src= "../img/dog"+num+".gif"; で、"anime" が設定された画像を dog+num+.gif に切り替えます。
      document.anime は img タグに設定された name="anime" の画像を指します。
      num = 0;    //現在の画像
      window.onmousedown = mousedown;
      function mousedown()
      {   num = (num+1)%5;
          document.anime.src= "../img/dog"+num+".gif";
      }
      
    3. <body> では img タグで "../img/dog0.gif" の画像を表示します。
      name= に "anime" を設定して下さい。
      mousedown() 関数から name に "anime" が設定された画像の src を切り替えます。
      <img src="../img/dog0.gif" name="anime">
      

  4. 画像の移動


    1. Enemy の画像が往復します。
      【img_move.html】
      <html>
      <head>
      <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-16">
      <link rel="stylesheet" href="javascript.css" type="text/css">
      <title>Image Move</title>
      <script type="text/javascript">
      <!--
        x=0;
        v=2;
        function moveImage()
        {
          x+=v;
          if((x>224)||(x<0))  v= -v; 
          document.Enemy.style.left= x;
        }
      // -->
      </script>
      </head>
      
      <body onLoad="setInterval('moveImage()',25)">
      <h2>Image Move</h2>
        <img src="../img/enemy1.gif" name="Enemy"
          style="position:absolute;left:0px;top:70px;">
      
      </body>
      </html>
      
    2. body の onLoad で setInterval を設定して 25 ミリ秒ごとに moveImage() を呼び出します。
      img タグの style で座標を設定して enemy1.gif を描画します。
      style は 自由に配置 を参照して下さい。
      <body onLoad="setInterval('moveImage()',25)">
        <img src="../img/enemy1.gif" name="Enemy"
          style="position:absolute;left:0px;top:70px;">
      
    3. moveImage() 関数の定義です。
      document.Enemy は name="Enemy" が設定されたリソースを指します。
      x は画像を描画するX座標で、Enemy.style.left= x; で座標を変えながら移動します。
      v は移動速度で右端(左端)まで動くと折り返します。
        x=0;
        v=2;
        function moveImage()
        {
          x+=v;
          if ((x>224)||(x<0)) v= -v; 
          document.Enemy.style.left= x;
        }
      

  5. キーで移動


    1. Animation GIF の画像をキー操作で動かします。
      【img_key.html】
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-16">
      <link rel="stylesheet" href="javascript.css" type="text/css">
      <title>Image KeyMove</title>
      <script type="text/javascript">
      <!--
      document.onkeydown = KeyCode;
        x=300;
        y=200;
        function KeyCode()
        {
          if(document.all)
              kcode = event.keyCode;
          else if(document.getElementById)
              kcode = (event.keyCode)? event.keyCode: event.charCode;
          else if(document.layers)
              kcode = event.which;
          switch(kcode)
          { 
            case 0x25:
                if (x>1)  x-= 2;
                break;
            case 0x26:
                if (y>1)  y-= 2;
                break;
            case 0x27:
                x+= 2;
                break;
            case 0x28:
                y+= 2;
                break;
          }          
        }
        function moveImage()
        {
          document.Enemy.style.left= x;
          document.Enemy.style.top= y;
        }
      // -->
      </script>
      </head>
      
      <body onLoad="setInterval('moveImage()',25)">
      <h1>矢印キーで画像を移動</h1>
      
      <img src="anime1.gif" name="Enemy"
        style="position:absolute;left:300px;top:200px;">
      
      </body>
      </html>
      
    2. body の onLoad で setInterval を設定して 25 ミリ秒ごとに moveImage() を呼び出します。
    3. moveImage() では Enemy.style.left= x; Enemy.style.top= y; の座標に画像を移動します。
      画像は img タグで name="Enemy" と style で座標を設定して anime1.gif を描画しています。
      Animation GIF の画像を使うと、アニメーションしながら移動します。
      <img src="anime1.gif" name="Enemy"
        style="position:absolute;left:300px;top:200px;">
      
    4. document.onkeydown = KeyCode; でキーが押されると KeyCode 関数が呼ばれます。
      function KeyCode() では、上下左右のキーを判定して x=300; y=200; を更新します。
        x=300;
        y=200;
        function KeyCode()
        {
          if(document.all)
              kcode = event.keyCode;
          else if(document.getElementById)
              kcode = (event.keyCode)? event.keyCode: event.charCode;
          else if(document.layers)
              kcode = event.which;
          switch(kcode)
          { 
            case 0x25:
                if (x>1)  x-= 2;
                break;
            case 0x26:
                if (y>1)  y-= 2;
                break;
            case 0x27:
                x+= 2;
                break;
            case 0x28:
                y+= 2;
                break;
          }          
        }
      

  6. setTimeout Animation


    1. setTimeout で画像を切り替えてアニメーションします。
      【anime1.html】
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-16">
      <link rel="stylesheet" href="javascript.css" type="text/css">
      <title>Animation</title>
      
      <script type="text/javascript">
      <!--
      imgnum = 5;     //画像の枚数
      images = new Array();
      for(i=0; i<imgnum; i++)
      {   images[i] = new Image();
          images[i].src = "../img/dog"+i+".gif";
      }
      function change(imgno)
      {   clearTimeout(timerID);
          if (imgno<images.length)
          {   document.anime.src= images[imgno].src;
              timerID = setTimeout("change("+(imgno+1)+")",100);
          }
          else
          {   timerID = setTimeout("change(0)",100);
          }
      }
      // -->
      </script>
      </head>
      
      <body onload="timerID=setTimeout('change(0)',100)">
      <h2>Animation</h2>
      <img src="../img/dog0.gif" name="anime">
      
      </body>
      </html>
      
    2. body の onload から setTimeout で change() 関数を呼び出します。
      100 はアニメーションの速度です。
      img タグで一枚目の画像(dog0.gif)を表示します。
      name="anime" を設定して下さい。
      <body onload="timerID=setTimeout('change(0)',100)">
      <img src="../img/dog0.gif" name="anime">
      
    3. head で images に画像をプレロードします。
      "../img/dog0.gif" ~ "../img/dog4.gif" の画像を読み込みます。
      "../img/dog" + i + ".gif" の「+」は文字列の連結演算子です。
      imgnum = 5;     //画像の枚数
      images = new Array();
      for(i=0; i<imgnum; i++)
      {   images[i] = new Image();
          images[i].src = "../img/dog"+i+".gif";
      }
      
    4. イメージを切り替える change() 関数です。
      タイマー設定で呼び出されます。
      document.anime.src は <img src="../img/dog0.gif" name="anime"> で name に "anime" が設定されたリソースです。
      このリソース(画像)を images[imgno].src に切り替えます。
      imgno は change() 関数が呼ばれる毎にアップし、images.length になるとゼロに戻ります。
      change() 関数の中から再び setTimeout() で change() 関数を呼び出しています。
      これにより画像を切り替えながらアニメーションが描画されます。
      "dog0.gif" ~ "dog4.gif" は透過 GIF では無いので、画像の周辺が白くなっています。
      function change(imgno)
      {   clearTimeout(timerID);
          if (imgno<images.length)
          {   document.anime.src= images[imgno].src;
              timerID = setTimeout("change("+(imgno+1)+")",100);
          }
          else
          {   timerID = setTimeout("change(0)",100);
          }
      }
      
    5. プレロードしないで、もっと簡単にアニメーションします。
      定期的に切り替えるときは setTimeout() よりも setInterval() の方が便利です。
      setInterval('change()',100) で 100 ミリ秒ごとに change() 関数を呼び出します。
      従って change() 関数の中から再び change() 関数を呼び出す必要はありません。
      change() 関数では imgnum を次の画像番号に設定して document.anime.src に画像の名前を設定します。
      【Source Code】
      imgcnt = 5;     //画像の枚数
      imgnum = 0;     //表示する画像番号
      function change()
      {   imgnum = (imgnum+1)%imgcnt;
          document.anime.src="../img/dog"+imgnum+".gif";
      }
      
      <body onload="timerID=setInterval('change()',100)">
      <img src="../img/dog0.gif" name="anime">
      

  7. Animation Start/Stop


    1. Start/Stop ボタンで、アニメーションを開始/停止します。
      【anime2.html】
      <html>
      <head>
      <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-16">
      <title>Animation-2</title>
      
      <script type="text/javascript">
      id = 0;      //Interval のID
      ic = 0;      //ic= 表示する画像番号
      
      //Start ボタンがクリックされたとき
      //123 は画像を変える時間
      function starts()
      {   clearInterval(id);
          id=window.setInterval("upDate()",123);
          Disp();
      }
      //Stop ボタンがクリックされたとき
      function stop()
      {   clearInterval(id); 
          Disp();
      }
      //starts() から setInterval() で呼び出される
      //ic= 表示する画像番号
      function upDate()
      {   ic = ic+1;
          if (ic > 4) ic=0;
          Disp();
      }
      //ic 番目の画像を描画
      function Disp()
      {   document.images[0].src="../img/dog"+ic+".gif";
      }
      </script>
      </head>
      
      <body bgcolor="white">
      <center>
      <br>
      <table border="0">
          <tr><td><img src="../img/dog0.gif"></td></tr>
      </table>
      <br>
      <form name="Ctrl">
          <input type="button" value="START" onClick="starts()">
          <input type="button" value="STOP" onClick="stop()">
      </form>
      </center>
      
      </body>
      </html>
      
    2. 画像を切り替えてアニメーションする元の画像です。
      <body bgcolor="white">
      <center>
      <br>
      <table border="0">
          <tr><td><img src="../img/dog0.gif"></td></tr>
      </table>
      
    3. "START" ボタンでアニメーションを開始、"STOP" ボタンで停止します。
      <form name="Ctrl">
          <input type="button" value="START" onClick="starts()">
          <input type="button" value="STOP" onClick="stop()">
      </form>
      </center>
      
    4. JavaScript の関数です。
      starts() 関数は Start ボタンがクリックされたときに呼ばれます。
      window.setInterval("upDate()",123); で一定間隔で upDate() 関数を呼び出します。
      123 は画像を切り替える間隔(ミリ秒)です。
      <script type="text/javascript">
      id = 0;      //Interval のID
      ic = 0;      //ic= 表示する画像番号
      
      function starts()
      {   clearInterval(id);
          id=window.setInterval("upDate()",123);
          Disp();
      }
      
    5. stop() 関数は Stop ボタンがクリックされたときに呼ばれます。
      function stop()
      {   clearInterval(id); 
          Disp();
      }
      
    6. upDate() 関数はアニメーション画像を切り替える関数です。
      Disp() 関数で ic で指示した画像に切り替えます。
      function upDate()
      {   ic = ic+1;
          if (ic > 4) ic=0;
          Disp();
      }
      
    7. Disp() 関数は ic 番目の画像に切り替える関数です。
      document.images[0].src で画像を番号で識別します。
      使っている画像は1枚だけなので images[0].src になります。
      (二枚目の画像は images[1].src になります)
      function Disp()
      {   document.images[0].src="../img/dog" + ic + ".gif";
      }
      
    8. 画像を番号で識別するよりも、次のように name を付けて参照する方が解り易いかも知れません。
          <tr><td><img src="../img/dog0.gif" name="anime"></td></tr>
            ・・・
          document.name.src="../img/dog" + ic + ".gif";
      

  8. Walk Animation


    1. 矢印キーでキャクターが歩きます。
      【walk.html】
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-16">
      <link rel="stylesheet" href="javascript.css" type="text/css">
      <title>Walk</title>
      <script type="text/javascript">
      <!--
      document.onkeydown = KeyCode;
        x=300;    //X座標
        y=200;    //Y座標
        dir=0;    //進行方向
        chg=0;    //画像の切り替え
        function KeyCode()
        {
          if(document.all)
              kcode = event.keyCode;
          else if(document.getElementById)
              kcode = (event.keyCode)? event.keyCode: event.charCode;
          else if(document.layers)
              kcode = event.which;
          switch(kcode)
          { 
            case 0x25:    //←
                if (x>1)  x-= 2;
                dir= 6;
                break;
            case 0x26:    //↑
                if (y>1)  y-= 2;
                dir= 0;
                break;
            case 0x27:    //→
                x+= 2;
                dir= 2;
                break;
            case 0x28:    //↓
                y+= 2;
                dir= 4;
                break;
          }          
        }
        function walk()
        {
          chg= (chg+1)%16;
          var n= dir+Math.floor(chg/8);
          document.char.src= images[n].src;
          document.char.style.left= x;
          document.char.style.top= y;
        }
        function preload()
        {
          imgnum = 8;     //画像の枚数
          images = new Array();
          for(i=0; i<imgnum; i++)
          { images[i] = new Image();
            images[i].src = "chr47_"+i+".gif";
          }
          setInterval('walk()',50);
        }  
      // -->
      </script>
      </head>
      
      <body onLoad="preload()">
      <h1>矢印キーでキャクターが歩く</h1>
      <img src="chr47_0.gif" name="char"
        style="position:absolute;left:300px;top:200px;">
      
      </body>
      </html>
      
    2. このプログラムで使用する画像は chr47_0.gif ~ chr47_7.gif の8枚です。
      元の画像は上に掲載している chr47.gif で、画像を切り分けるソフトを使って8枚の画像に切り分けます。
      私のダウンロードサイトから提供している Map Editor にも画像を切り分ける機能を追加しました。
    3. 8枚の画像を preload() 関数で事前にロードしています。
        function preload()
        {
          imgnum = 8;     //画像の枚数
          images = new Array();
          for(i=0; i<imgnum; i++)
          { images[i] = new Image();
            images[i].src = "chr47_"+i+".gif";
          }
          setInterval('walk()',50);
        }  
      
    4. KeyCode() 関数で矢印キーを検出して、上下左右にアニメーションしながらキャラクターを動かします。
      document.onkeydown = KeyCode;
        x=300;    //X座標
        y=200;    //Y座標
        dir=0;    //進行方向
        chg=0;    //画像の切り替え
        function KeyCode()
        {
          if(document.all)
              kcode = event.keyCode;
          else if(document.getElementById)
              kcode = (event.keyCode)? event.keyCode: event.charCode;
          else if(document.layers)
              kcode = event.which;
          switch(kcode)
          { 
            case 0x25:    //←
                if (x>1)  x-= 2;
                dir= 6;
                break;
            case 0x26:    //↑
                if (y>1)  y-= 2;
                dir= 0;
                break;
            case 0x27:    //→
                x+= 2;
                dir= 2;
                break;
            case 0x28:    //↓
                y+= 2;
                dir= 4;
                break;
          }          
        }
      
    5. walk() 関数でキャラクター座標の更新と画像の切り替えを行います。
      chg は2枚の画像の切り替えですが、50 ミリ秒ごとに walk() 関数が呼び出されるので、切り替速度を落としています。
        function walk()
        {
          chg= (chg+1)%16;
          var n= dir+Math.floor(chg/8);
          document.char.src= images[n].src;
          document.char.style.left= x;
          document.char.style.top= y;
        }
      

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)