jsを使ったアニメーション-anime.jsについて

jsを使ったアニメーションをanime.jsで実装する方法について書きます。

今回は、スクロールして画面上にアニメーションしたい要素が出現したときにイベントが発生するようにするため、jquery.inviewを利用します。

セッティング

各種ライブラリは以下から落としてきます。
– anime.js
– jquery.inview

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.j"></script>
<script type="text/javascript" src="./js/jquery.inview.min.j"></script>
<script type="text/javascript" src="./js/anime.min.j"></script>

jquery.inviewは、なぜかjquery2系・3系では使えないようなので注意

HTMLの記述

ライブラリ上で特にclassやdata属性の指定をしないといけないというルールはないので、適当で大丈夫です。
複数要素を動かすときにそれぞれの要素にidを振ってあげると楽なので、そこだけセットしておきます。

<div class="container">
  <p id="item01" class="item"><img src="./images/items/01.png"></p>
  <p id="item02" class="item"><img src="./images/items/02.png"></p>
</div>

CSSの記述

先に要素をcss上でposition:absolute指定でそれぞれ配置したうえで、動かすようにします。

/*css*/
.contaier {
  position: relative;
  width: 500px;
  margin: 0 auto;
}
.item {
  position: absolute;
  /*inviewのイベント発生が遅いので、初期で見えてしまう問題があるので初期状態は消しておく*/
  display:none;
}
#item01 {
  top: 100px;
  left: 150px
}
#item02 {
  bottom: 200px;
  right: 50px
}

JSの設定

まずはinviewの設定

以下の記述でinview側はセットできます。

$('.container').one('inview', function(event, visible) {
  // .oneで一度だけイベントを発生させる（スクロールで戻ったあと2度目は発生させないため）
  if (visible) {
    // 要素が見えたときにイベントを発生
    // ここにアニメーションを記載。
  }
});

次にアニメーションの設定

以下の記述でanimeの設定をします。

詳細な設定はこちらの公式DOCUMENTより参照

complete以下を設定してあげることで、移動後(非同期処理)の挙動も設定できます。

$('.container').one('inview', function(event, visible) {
  if (visible) {
    // 初期のdisplayが非表示なので、fadeInで見せる。
    // 注意したいのは、これはreverseで表現できないため、jqueryのfadeInを利用する。
    $('#item01').fadeIn(1000);
    anime({
      targets: '#item01',
      translateY: 200,
      easing: 'easeInOutQuart',
      direction: 'reverse', // reverseを設定することでCSSで配置したゴール位置ところへ移動させます。
      rotate: -10,
      duration: 2000,
      scale: '*=0.6',
      complete: function() { //ここから先で移動後の挙動
        anime({
          targets: '#item01',
          duration: 500,
          loop: true,
          direction: 'alternate',
          rotate: 2,
          easing: 'easeInOutSine',
          loop: true
        });
      }
    });
  }
});

こんな感じで設定できます。

direction:reverseを設定することで、CSSであらかじめ設定した場所へ移動します。

他にもon(“click”)などのイベントを設定すればclickで移動させたりすることができます。

durationで動きの時間制御と、fadeIn()で表示の速度を制御しています。

まとめ

• inviewと初期表示とfadeInで苦戦しました。
• jquery.inviewのチョイスは正直微妙かも。
  • メンテナンスもされていない(4年前とか)ようなので、何かスクロールで要素が出現したときにイベントを発生させるライブラリがあれば教えてください。
• アニメーションについては、CSSのみで実装できるものも多いが、複雑な動きを表現したいときのanime.jsのチョイスは良さそう
• 細かく設定していい感じに動くと楽しくなって、ついつい時間をかけすぎてしまうので注意（笑）