R.Aokiをフォローする

【Anime.js】簡単なアニメーションを作ろう

フロントエンド

はじめに

今回はAnime.jsの紹介になります。

使用技術

Anime.js (3.2.2)

仕様技術解説

Anime.jsは、Web上でのアニメーションを簡単に作成するためのJavaScriptライブラリです。シンプルなAPIで多くの機能を提供しており、CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトなどのさまざまな要素をアニメーション化することができます。

使用例

今回は簡単に作成できるものとして、心臓の鼓動をアニメーション化しました。

下記がそのコードになります。

<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        anime({
          targets: '#target',
          scale: [1, 1.2],
          loop: true,
          direction: 'alternate',
          easing: 'easeInOutSine',
          duration: 800,
          update: function(anim) {
            const progress = anim.progress / 100;
            const color = `hsl(0, 100%, ${60 - progress * 10}%)`;
            document.querySelector("#target").style.setProperty("--heart-color", color);
          }
        });
      });
    </script>
    <style>
      #container {
        padding: 5rem;
      }

      #target {
        --heart-color: red;
        width: 100px;
        height: 100px;
        background-color: var(--heart-color);
        position: relative;
        display: flex;
        border-radius: 50%;
      }

      #target::before,
      #target::after {
        content: "";
        width: 100px;
        height: 100px;
        background-color: var(--heart-color);
        position: absolute;
        border-radius: 50%;
      }

      #target::before {
        top: -50px;
        left: 0;
      }

      #target::after {
        left: 50px;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="target"></div>
    </div>
  </body>
</html>

解説

実装内容

このコードでは心臓を模した要素をスケールアップしながら、進行状況に応じて色が変化するアニメーションを実装しています。

Anime.jsの設定

今回は下記のパラメータを設定しました。

  • targets: '#target': ・・・アニメーションの対象となる要素を指定
  • scale: [1, 1.2] ・・・ スケールを1から1.2に変化
  • loop: true: ・・・アニメーションをループ
  • direction: 'alternate': ・・・アニメーションの方向を交互に切り替え
  • easing: 'easeInOutSine': ・・・イージング関数を指定し、アニメーションの動きを滑らかにする
  • duration: 800: ・・・アニメーションの持続時間を800ミリ秒に設定
  • update: function(): ・・・アニメーションの進行中に呼び出され、要素の色を変化させる

ほかにも様々な設定が可能なため、詳細を知りたい方は公式ドキュメントをご確認ください。

TIPS

Anime.jsにはほかにも機能があり、今回使用しなかった機能を一部ご紹介します。

タイムライン

タイムラインを使用すると、複数のアニメーションを同期させることが出来ます。デフォルトではタイムラインに追加された各アニメーションは前のアニメーションが終了した後に開始されますが、offsetを用いることで開始時間や順序を制御することも可能です。

// 例
const tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

tl.add({
  targets: '.box',
  translateX: 250
}).add({
  targets: '.box',
  translateY: 250,
  offset: '-=500'
});

(引用：https://animejs.com/v3/documentation/#timelineBasics)

SVGアニメーション

SVG要素をアニメーション化することも可能です。

MOTION PATH

SVG要素のpath(x, y, angle) を基準にして要素をアニメーション化します。
SVGで作成した線の上を、指定した要素が移動するイメージです。

// 例
const path = anime.path('.motion-path-demo path');

anime({
  targets: '.motion-path-demo .el',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});

(引用：https://animejs.com/v3/documentation/#motionPath)

MORPHING

2 つの SVG シェイプ間の遷移を作成します。
レーダーチャートの値が常に変動しているようなイメージです。

こちらの注意点として、図形の点の数は同じである必要があります。

// 例
anime({
  targets: '.morphing-demo .polymorph',
  points: [
    { value: [
      '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369',
      '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369']
    },
    { value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
    { value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
    { value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
  ],
  easing: 'easeOutQuad',
  duration: 2000,
  loop: true
});

(引用：https://animejs.com/v3/documentation/#morphing)

LINE DRAWING

‘stroke-dashoffset’プロパティを使用してパス描画アニメーションを作成します。
サインをなぞるような描画イメージです。

// 例
anime({
  targets: '.line-drawing-demo .lines path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});

(引用：https://animejs.com/v3/documentation/#lineDrawing)

SVGに関しては公式ドキュメントを確認していただくのが一番わかりやすいかなと思います。

イベントハンドリング

アニメーションの開始、終了、進行中などのイベントをキャッチして、カスタム処理を追加することが可能です。

// 例
anime({
  targets: '.box',
  translateX: 250,
  complete: function(anim) {
    console.log('Complete!!');
  }
});

(引用：https://animejs.com/v3/documentation/#update)

おわりに

今回はAnime.jsについて簡単にですが紹介させていただきました。
実際に使用する場面としては、ページ遷移時のエフェクトやローディング時のアイコン、ロゴの強調などが考えられます。ブラウザゲームのキャラクターなどに使っても面白いかもしれません。
TIPSで挙げましたがsvg画像を指定して動かすこともできるため、自由度はかなり高いと思います。

公式サイトにあるアニメーションが格好いいので、ぜひ見に行ってみてください。
ここまでご覧いただきありがとうございました。

クレジット

・https://animejs.com/
・https://animejs.com/v3/documentation/
・https://tr.you84815.space/animejs/index.html