動きがなめらかなアニメーションライブラリ「anime.js」を使ってみた！

どうでもです、お久しぶりです、はやちですよ₍₍ (ง ˘ω˘ )ว ⁾⁾
今回はなめらかなアニメーションを再現できるライブラリ「anime.js」を紹介します(˘ω˘)👆

導入方法

それではさっそく、導入方法からご説明します。
まず、ソースはGitHubで公開しているので、こちらをダウンロードしてください。
https://github.com/juliangarnier/anime#specific-animation-parameters

ダウンロードしたら、anime.min.jsを読み込みます。

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

タスクランナーをお使いの方は、

npm install animejs

または

bower install animejs

でインストールして、

使用するjsファイルに

import anime from 'animejs'

を読み込ませたら準備おkです( ˇωˇ )

使用方法

次に使用方法をご紹介します( ˇωˇ)☝

基本的な使い方

anime({
  targets: '.target', //動かしたい要素
  translateX: '200px',
  rotate: 180,
  duration: 2000, //アニメーションの時間を指定
  loop: true //ループを設定
});

動かしたい要素はhtmlのタグ直接指定しても、classで指定したものを指定してもokです( ˇωˇ)☝
あとはcssで使われているプロパティを指定してあげるだけで下のように実装することができます。

順番ずつ動かしてみる

anime({
  targets: '.target-item',
  translateX: '13.5rem',
  rotate: 180,
  //▼ここで順番を指定している
  delay: function(el, index) {
    return index * 200;
  },
  direction: 'alternate',
  loop: true
});

目、口、輪郭にそれぞれ同じclassをつけます。
delayのコールバックで要素の数分遅らせることができます( ˇωˇ)☝

まとめ

使いやすくてとても動きがなめらか！　アニメーションの表現がたのしくなりますね！( ˇωˇ )

使い方もカンタンで、色々と応用した実装が期待でき、夢がひろがりますな₍₍ (ง ˘ω˘ )ว ⁾⁾

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。