【JavaScript】キャットモーション

2019年07月02日

さて、前回つくりました自動スライドで写真を紹介するページ。

この仕組みを使って、ひとつループアニメーションを作ってみましょう。

作品名はキャットモーション。

リアルなアニメーションを作るには、まず画像をたくさん用意しなければなりません。

多ければ多いほどリアルに見えるわけですが、今回は8枚の画像を用意しました。

もちろん、画像サイズはすべて同じに。

ではプログラムを書いていきましょう。

まずは、関数startを作り、処理内容には、motion()を0.1秒おきに表示する仕組みを。

<script type = "text/javascript">      
  function start() {
  setInterval("motion()", 100);
        }
</script>

function start() {

setInterval("motion()", 100);

}

</script>

motion()のうしろの1000の単位はミリ秒ということでした。

ここでは0.1秒になります。

続いて、motionも定義していきましょう。

var i=0;
function motion() {
  i++;
  if(i % 8 == 0){
    p = document.getElementById("photo");
    p.setAttribute("src", "img/cat_motion/cat01.png");
  }
            
  else if (i % 8 == 1) {
    p = document.getElementById("photo");
    p.setAttribute("src", "img/cat_motion/cat02.png");
  }

  else if (i % 8 == 2) {
    p = document.getElementById("photo");
    p.setAttribute("src", "img/cat_motion/cat03.png");
  }

  else if (i % 8 == 3) {
    p = document.getElementById("photo");
    p.setAttribute("src", "img/cat_motion/cat04.png");
  }

  else if (i % 8 == 4) {
    p = document.getElementById("photo");
    p.setAttribute("src", "img/cat_motion/cat05.png");
  }

  else if (i % 8 == 5) {
    p = document.getElementById("photo");
    p.setAttribute("src", "img/cat_motion/cat06.png");
  }

  else if (i % 8 == 6) {
    p = document.getElementById("photo");
    p.setAttribute("src", "img/cat_motion/cat07.png");
  }

  else if (i % 8 == 7) {
    p = document.getElementById("photo");
    p.setAttribute("src", "img/cat_motion/cat08.png");
  }
}

var i=0;

function motion() {

i++;

if(i % 8 == 0){