Anime.js（アニメジェイエス）は、フランスのエンジニア Julian Garnier 氏が 2017 年頃に公開した、軽量な JavaScript アニメーションライブラリです。CSS プロパティ、SVG 属性、DOM の data 属性、JavaScript オブジェクト、Transform など、ほぼあらゆる数値プロパティに対してトゥイーンをかけられ、数 KB 程度の小さなフットプリントながら timeline、staggering、コールバック、ループ、リバース、controls といった本格的な機能を備えています。GSAP と比較すると規模は小さいものの、シンプルで学びやすく、ロゴアニメーションやヒーローセクション、SVG モーフィングなどで人気の高い選択肢です。
この記事の目次
- Anime.js の基本 API
- staggering とタイムライン
- SVG モーフィングとパス追従
- v4 への進化と立ち位置
- まとめ
Anime.js の基本 API
Anime.js の中心的な API は、シンプルな anime() 関数（v4 では createAnimation などに整理）です。引数のオブジェクトに targets（対象要素や JS オブジェクト）と、アニメーションさせたいプロパティ名、目標値、duration、easing、delay、loop、direction などを書くだけでアニメーションが開始します。例えば
を 1 秒かけて右に動かすには、anime({ targets: '.box', translateX: 250, duration: 1000, easing: 'easeInOutQuad' }) と書きます。
プロパティの値には、固定値だけでなく、関数（要素ごとに異なる値を返す）、配列（fromTo 指定）、ランダム関数なども渡せます。これにより、複数要素を一括で指定しつつ「要素ごとに少しずつ違う動き」を簡単に作れます。CSS プロパティはもちろん、SVG の属性（cx、d など）や、Transform の個別軸（translateX、rotateZ）も別パラメータとして自然に書ける点が、CSS @keyframes を直接書くよりも便利な部分です。
staggering とタイムライン
Anime.js の魅力的な機能の一つが stagger（スタッガリング）です。複数要素のアニメーションに対して、各要素ごとに少しずつ遅延を加えて「波のように」動かす表現を、anime.stagger(100) のような形で簡潔に書けます。さらに、グリッドのどこからスタートするか、距離に応じてどう遅延を変えるかなど、細かな指定もできるため、メニュー項目の登場演出やカード一覧のフェードインなどで威力を発揮します。
複雑な振付を組むときは、timeline 機能を使います。anime.timeline() で時系列の入れ物を作り、その上に add() でアニメーションを順次積み重ねることで、複数のアニメーションを連続再生したり、特定のオフセットでオーバーラップさせたりできます。GSAP の timeline と比較するとシンプルな実装ですが、ロゴの登場演出、見出しの文字単位アニメーション、ヒーローセクションのオープニングといった「短く凝った演出」の用途には十分な表現力を持ちます。
SVG モーフィングとパス追従
Anime.js は SVG への対応も手厚く、形状のモーフィング（path の d 属性のアニメーション）、SVG パスに沿った移動（motion path）、線が描かれていく演出（stroke の dasharray アニメーション）など、SVG ならではの表現を簡単に書けます。例えば、ロゴが線画から塗りに「描かれていく」演出は、stroke-dasharray と stroke-dashoffset をアニメーションさせることで実現でき、Anime.js のヘルパーが面倒な計算を肩代わりしてくれます。
SVG モーフィングは、d 属性に同じコマンド構成を持つ二つのパスを用意し、Anime.js でその間を補間させるという基本パターンで動きます。アイコンの形状変化、形が変わるボタン、ストーリーテリング型 LP の遷移演出などに応用でき、SVG エディタで作った素材をそのまま動かせるのが強みです。GSAP の MorphSVG プラグインと比較すると、対応できる差分のパターンに制約はあるものの、軽量に取り入れたい場面では十分な選択肢になります。
v4 への進化と立ち位置
Anime.js は長らく v3 系として安定運用されていましたが、近年では v4 がリリースされ、TypeScript で再設計され、モジュールが整理され、API がより現代的な形になりました。createAnimation、createTimeline、createTimer、createDraggable など目的別の関数群に分割され、必要なものだけを import することでバンドルサイズを最小化できる構成になっています。既存の v3 利用者向けに移行ガイドも整備されており、段階的に乗り換えやすい設計です。
ライブラリ全体の立ち位置としては、「GSAP ほどの大規模な振付や ScrollTrigger は必要ないが、CSS @keyframes よりは凝った動きを書きたい」というニーズに最もよくフィットします。フットプリントの小ささを重視する LP やマイクロサイト、ブログテーマのワンポイント演出、軽量な SVG アニメーションを多用する UI などで、デファクトに近い選択肢の一つになっています。学習コストの低さも長所で、CSS は書けるが JS アニメーション初心者という層にとっても扱いやすいライブラリです。
まとめ
Anime.js は、軽量さと多機能性のバランスが取れた JS アニメーションライブラリです。CSS・SVG・JS オブジェクトを単一の API で扱え、stagger や timeline、SVG モーフィングまで簡潔に書ける点が魅力で、GSAP ほど大掛かりではないがそれなりに凝った演出を入れたいときに第一候補になります。v4 でモジュール構造と型整備が進み、現代的な開発スタックともよく馴染みます。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント