ユーザー体験を向上させる！Anime.jsで作る、魅力的なアニメーション入門

Webサイトやアプリケーションにアニメーションを取り入れると、ユーザーインタラクションが豊かになり、魅力的な体験を提供できます。

今回は、JavaScriptアニメーションエンジン「Anime.js」を使って、CSSプロパティやSVG、DOMなどを簡単にアニメーションする方法をご紹介。初心者の方でも理解しやすいよう、基本的な使い方から応用、そして実際のデモまでご紹介します。

なぜアニメーションが重要なのか？

視覚的なフィードバック: ボタンクリックやアラート表示時にアニメーションを加えることで、ユーザーの行動に対する反応を明確に示し、操作性を向上させます。
ユーザーエンゲージメント: 滑らかなアニメーションは、サイトやアプリをより魅力的にし、ユーザーの滞在時間を延ばす効果が期待できます。
ブランドイメージ: アニメーションはブランドの個性を表現する手段の一つ。洗練されたアニメーションは、ブランドイメージの向上にもつながります。

Anime.jsとは？

Anime.jsは、軽量かつ柔軟なJavaScriptライブラリ。直感的な構文で、複雑なアニメーションも簡単に作成できます。CSSアニメーションだけでは難しい、SVGやJavaScriptオブジェクトのアニメーションも実現可能です。

Anime.jsを導入しよう

Anime.jsは幾つかの方法でインストールできます。
まず、npmを使った方法です。

npm install animejs --save

インストール後、以下のコードでAnime.jsを読み込みます。

import anime from "animejs/lib/anime.es.js";

また、CDNを使ってAnime.jsを読み込む方法もあります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Anime.jsの基本的な使い方

最もシンプルなアニメーションの例を見てみましょう。

anime({
  targets: ".css-selector-demo .el",
  translateX: 250
});

たったこれだけのコードで、指定した要素が右に移動するアニメーションが実現できます。

Anime.jsでできること

Anime.jsは、様々な種類のアニメーションを作成できます。

テキストのアニメーション

数値や文字列を変化させるアニメーションも可能です。

const logEl = document.querySelector(".battery-log");

const battery = {
  charged: "0%",
  cycles: 120
}

anime({
  targets: battery,
  charged: "100%",
  cycles: 130,
  round: 1,
  easing: "linear",
  update: function() {
    logEl.innerHTML = JSON.stringify(battery);
  }
});

SVGのアニメーション

複雑になりますが、SVGのアニメーションも可能です。

SVGアニメーションの例はとても多いですが、SVG素材を作る必要があるので、若干敷居が高いかも知れません。

しかし、それだけにとても効果的なアニメーションができます。

anime({
  targets: [".svg-attributes-demo polygon", "feTurbulence", "feDisplacementMap"],
  points: "64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96",
  baseFrequency: 0,
  scale: 1,
  loop: true,
  direction: "alternate",
  easing: "easeInOutExpo"
});

タイムライン

タイムラインはAnime.jsの特徴の一つです。複数のアニメーションを連続して実行できます。

// Create a timeline with default parameters
const tl = anime.timeline({
  easing: "easeOutExpo",
  duration: 750
});

// Add children
tl
.add({
  targets: ".basic-timeline-demo .el.square",
  translateX: 250,
})
.add({
  targets: ".basic-timeline-demo .el.circle",
  translateX: 250,
})
.add({
  targets: ".basic-timeline-demo .el.triangle",
  translateX: 250,
});