anime.jsでドット絵を制御する【Part2】

前回の記事ではページの読み込みと同時に、自動でアニメーションが開始していました。
今回は mouseover と onclick を使用して、セルの上にマウスカーソルが乗った際と、ボタンをクリックした際にアニメーションが始まるようにしました。

ドット絵サンプル

Play

ドット絵の元イラスト

サンプルをつくる際に使用したイラストです。

© Unity Technologies Japan/UCL

ドット絵のコード

ドット絵はtableタグを使って、セルにbackground-colorを指定することで作成しています。

HTML

<table class="dotcontainer">
<tr id="ar"><td id="a1"></td><td id="a2"></td><td id="a3"></td> ... <td id="ap"></td></tr>
<tr id="br"><td id="b1"></td><td id="b2"></td><td id="b3"></td> ... <td id="bp"></td></tr>
<tr id="cr"><td id="c1"></td><td id="c2"></td><td id="c3"></td> ... <td id="cp"></td></tr>
　　　　　　　・
　　　　　　　・
　　　　　　　・
<tr id="sr"><td id="s1"></td><td id="s2"></td><td id="s3"></td> ... <td id="sp"></td></tr>
</table>
<button id="btn_start">Play</button>

今回のサンプルではボタンのクリックでアニメーションを開始するので、ドット絵を構成する table の下に button タグで id「btn_start」を設定したボタンを配置しています。

CSS

.dotcontainer {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-collapse: separate;
  max-width: 500px;
  height: auto;
}
.dotcontainer td {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: #fff;
  border: solid 1px #eee;
}

今回はドットのサイズを 20px としました。ドット絵は「縦19 × 横25」で作成しているので、max-width は 500px としています。

JavaScript_1

function hE001() {
  anime({targets:'#a1',rotateY:[{value:'90deg',duration:1000},{value:0,duration:8000}],
    backgroundColor:[{value:'#f5f5ff',duration:1000},{value:'#fff',duration:1500,easing:'linear'}]
  });
}
var rot = document.getElementById('a1');
rot.addEventListener('mouseover',hE001,false);
　　　　　　　　　　　・
　　　　　　　　　　　・

セルの上にマウスカーソルが乗った際の動作は上記コードで設定しています。
addEventListener()を使用して、指定したidのセル(getElementById(‘a1’))にマウスカーソルが乗った時(第1引数:mouseover)指定したアニメーション(第2引数:hE001)が実行されます。

JavaScript_2

var roYa = anime.timeline({targets:'#ar td',rotateY:[{value:'180deg',duration:3000,delay:0},
  {value:'180deg',delay:2000},{value:0,duration:3000}]
});
　　　　　　　　　　　・
　　　　　　　　　　　・
var roYs = anime.timeline({targets:'#sr td',rotateY:[{value:'180deg',duration:3000,delay:1800},
  {value:'180deg',delay:200},{value:0,duration:3000}]
});
document.getElementById("btn_start").onclick = function(){
 roYa
  .add({targets:'#a1,#a2,#a3,#a4,#a5,#a6,#a7,#a8,#a9,#aa,#ab,#ac,#ae,#ah,#ai,#aj,#ak,#al,#am,#an,#ao,#ap',
    backgroundColor:[{value:'#f5f5ff',duration:1000},{value:'#f5f5ff',delay:4000},
    {value:'#fff',duration:1000,easing:'linear'}],offset:0})
  .add({targets:'#ad',backgroundColor:[{value:'#e4841c',duration:1000},{value:'#e4841c',delay:4000},
    {value:'#fff',duration:1000,easing:'linear'}],offset:0})
  .add({targets:'#af,#ag',backgroundColor:[{value:'#f7941d',duration:1000},{value:'#f7941d',delay:4000},
    {value:'#fff',duration:1000,easing:'linear'}],offset:0})
　　　　　　　　　　　・
　　　　　　　　　　　・
roYs
 .add({targets:'#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#sa,#sb,#sc,#sf,#sg,#sh,#si,#sj,#sk,#sl,#sm,#sn,#so,#sp',
   backgroundColor:[{value:'#f5f5ff',duration:1000},{value:'#f5f5ff',delay:2200},
   {value:'#fff',duration:1000,easing:'linear'}],offset:1800})
 .add({targets:'#sd',backgroundColor:[{value:'#f7941d',duration:1000},{value:'#f7941d',delay:2200},
   {value:'#fff',duration:1000,easing:'linear'}],offset:1800})
 .add({targets:'#se',backgroundColor:[{value:'#433d2c',duration:1000},{value:'#433d2c',delay:2200},
   {value:'#fff',duration:1000,easing:'linear'}],offset:1800})
};

ボタンをクリックした際の動作を上記コードで設定しています。
tableの行(tr)ごとに回転するタイミングを設定した後に、セルの色を指定しています。
getElementByIdでボタンに設定したid(btn_start)を指定することで、クリック(onclick)された時にアニメーションが実行されます。