javascript（gridのアニメーション）
■anime.js でグリッドを操作するアニメーション。
公式のHPでグリッド上のオブジェクトの操作が気になったので、サンプルを作って動かしてみる。公式のコードから少し編集して下のようなサンプルで試す。
html
グリッドの要素の square クラス（el クラス）は40準備して、横8×縦5のグリッドとなるようサイズや背景部分を調整している。
<html>
<head>
<meta charset="utf-8">
<link href="aniSample04.css" rel="stylesheet" type="text/css">
<script src="../anime.min.js" defer></script>
<script src="./aniSample04.js" defer></script>
</head>
<body>
<div class="grid-demo">
<div class="grid">
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
<div class="square el"></div>
</div>
</div>
</body>
</html>css
.grid-demoが下の実行画面で黒色の部分、.gridが黄色の部分。
.grid-demo {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 400px;
height: 300px;
background-color: Black;
}
.grid {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 55%;
min-height: 120px;
padding-top: 5px;
padding-bottom: 5px;
background-color: Yellow;
flex-wrap: wrap;
}
.square {
pointer-events: none;
position: relative;
width: 24px;
height: 24px;
margin: 1px;
background-color: currentColor;
}
.el {
color: blue;
}javascript
anime({
targets: '.el',
scale: [
{value: 0, easing: 'linear', duration: 2000},
{value: 1, easing: 'easeInOutQuad', duration: 2000}
],
delay: anime.stagger(800, {grid: [8, 5], from: 'first'}),
});
実行画面が下。左上から右下にかけてアニメーションが動いていく（staggerの中で first 設定にしているため）。上のjavascript の中で、scale で各オブジェクトの倍率を変更する。value 0 （サイズが0のため表示されない）に向かって、2000ミリ秒（2秒）かけて動き、その後、value 1（元のサイズ）に向かって、また2000ミリ秒（2秒）かけて動く。
centerの設定にすると、真ん中から外側に向かって動作する。
{grid: [4, 5], from: 'center'}) の設定にすると、横4×縦5の中の真ん中からアニメーションが始まる。
anime.js で気になったのは今まで見てきたものくらい。pathや遅延やこのグリッドなどを組み合わせて何かできそう。
