anime.jsでstaggerを使ってみる

アニメーションのライブラリ anime.js が v3.0 にアップデートされたので、デモの一つ Staggering animations を使って動作を試してみました。

anime.jsの準備

github にある anime.js のファイルをダウンロードして配置することで環境が整います。
下記コードのような感じで、anime.jsを読み込みます。

index.html
<script src="anime.min.js"></script>

Staggering animations

stagger なので、少しずつタイミングをずらしながらアニメーションする、という事だと思います。

1. デモの動作

最初にデモの動作を確認します。

デモ

2. 色をつけてみる

Staggering animations の動作に合わせて色を変化させてみます。
Staggering animations の JavaScript に記述を加えます。

JavaScript
.add({
  targets: '.stagger-visualizer .dot',  //全てのドットを対象とする
  keyframes: [
    {
      background: 'linear-gradient(white, lightgray)',  //デフォルトの色
      delay: anime.stagger(100,{grid: [20, 10], from: index}),
      duration: 0
    }, {
      background: 'linear-gradient(blue, deeppink)',  //変化後の色
      duration: 2250
    }, {
      background: 'linear-gradient(white, lightgray)',  //元の色に戻す
      duration: 300
    }
  ]
}, 0)

ディレイの部分に anime.stagger を使用しています。
最初の数字 100 はディレイの間隔で、値を大きくすると間隔が広くなって、小さくすると狭くなります。
grid の数字はドットの数です。(横20, 縦10)

from には起点となる場所を設定します。
デモの場合では 0 ~ 199 までの範囲でランダムな数が入る変数 index を使用しているので、ランダムに選ばれたポイントが起点となります。

JavaScript
var index = anime.random(0, numberOfElements-1);

2.1 色をつけたサンプル

1.のデモに色を追加すると、下図のようになります。

カラーver

2.2 行ごとに色を変えた場合のサンプル

ランダムに選ばれる index の値で条件を分岐させると下図のようになります。

カラーver2

3. 中心を起点としてみる

from に ‘center’ を設定することで、起点がグリッドの中心に固定されます。

JavaScript
delay: anime.stagger(100,{grid: [20, 10], from: 'center'})

3.1 中心を起点としたサンプル

色が変化する起点がグリッドの中心に固定されました。

グリッドの中心

4. ディレイを放射状からX軸に変えてみる

axis を使うことで、放射状になっていたディレイを X 軸、または Y 軸に変更することができます。

JavaScript
delay: anime.stagger(80,{grid: [20, 10], from: 0, axis: 'x'})

4.1 X軸に変えた場合のサンプル

from を 0 としたので常に左端から、axis を ‘x’ としたので横方向に展開していきます。

横方向に展開

タイトルとURLをコピーしました