Anime.js：DOM と SVG の動きをタイムラインで組み立てる

Anime.js が動かす対象

READMEでは、Anime.jsは高速で多用途かつ軽量なJavaScriptアニメーションライブラリと説明されています。APIはシンプルでありながら強力であるとされ、CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトという4種類のターゲットに対応します。READMEの冒頭にはアニメーションロゴが掲載されていますが、リポジトリのメタデータにはブラウザ対応、パフォーマンス基準、最小実行要件は記載されていません。これらの情報は他のソースで確認する必要があります。また、インストール手順やパッケージマネージャーを使った追加方法もREADMEには含まれておらず、ESモジュールのインポート例のみが示されています。そのため、実際のセットアップ手順は公式ドキュメントを参照する必要があります。

ターゲットとプロパティの指定

READMEによると、Anime.jsは100%無料であり、プロジェクトはスポンサーによって支えられています。スポンサーシップにはプラチナとシルバーの2つのティアがあり、プレースホルダー画像が表示されていますが、具体的なスポンサー名は記載されていません。GitHub Sponsorsページへのリンクがあり、寄付を呼びかけています。READMEには有料機能、プレミアムサポート、MITライセンス以外の商用条件は一切言及されておらず、スポンサーシップはライブラリ自体に結びついた収益モデルではなく、自発的な支援であると見なせます。スポンサー特典（ロゴ表示の場所や優先サポートなど）については、READMEでは明記されておらず、ティアごとのプレースホルダーが存在するだけです。

タイムラインで順序を固定する

READMEでは、'animejs'から`animate`と`stagger`をESモジュールとしてインポートするコード例が示されています。この例では、`.square`セレクタに対して`animate`を呼び出し、`x`位置を320に、回転を-180度から、1250ミリ秒の間アニメーションさせ、65ミリ秒の`stagger`遅延（中心から）を設定し、イージング関数は'inOutQuint'、ループと交互方向を有効にしています。このスニペットは、`duration`、`delay`、`ease`、`loop`、`alternate`などのプロパティを含むオプションオブジェクトを受け入れることを示しています。READMEにはインストール方法は書かれておらず、npmやCDN、ダウンロードのいずれの方法も記載されていません。したがって、実際の導入方法はドキュメントやリリース情報で確認する必要があります。

SVG とオブジェクトの扱い

READMEは完全なV4ドキュメントをanimejs.com/documentationで参照できるとしています。また、v3からv4への移行ガイドはGitHubのwikiページにリンクされています。README自体には、破壊的な変更や移行手順の詳細は記載されていません。リポジトリのメタデータではデフォルトブランチがmasterであり、ホームページはanimejs.comです。v3を使用しているユーザーにとって、移行ガイドがv4の変更点を知る主な情報源ですが、その内容はREADMEの範囲外です。READMEにはV4のロゴアニメーションも含まれていますが、v4のリリース日やサポートポリシーには触れていません。完全な情報を得るには、ドキュメントと移行ガイドを訪問する必要があります。

イベント、再生制御、反復

READMEには、ソースコードを変更する人向けのnpmスクリプトが複数リストアップされています。まず`npm i`を実行して依存関係をインストールします。`dev`スクリプトは`src/**/*.js`の変更を監視し、ESMバージョンを`lib/`にバンドルし、`types/`に型宣言を作成します。`build`スクリプトはESM、UMD、CJS、IIFEバージョンを`lib/`にバンドルし、型宣言も生成します。`test:browser`はローカルサーバーを起動してブラウザ関連のテストを実行し、`test:node`はNode関連のテストを実行します。`open:examples`はローカルサーバーを起動して例を閲覧します。また、`dev:test`は`dev`と`test:browser`を同時に実行します。テストフレームワークやバンドルツールの詳細はREADMEには記載されておらず、package.jsonやソースコードを確認する必要があります。

導入パッケージを実画面で試す

Anime.jsはMITライセンスの下でリリースされています。これはライセンスファイルとリポジトリのメタデータの両方に示されています。このライセンスは、ソフトウェアのコピーを入手した人に対して、使用、コピー、変更、統合、公開、配布、再ライセンス、販売の権利を、無償で許可します。ただし、すべてのコピーには著作権表示と許可表示を含める必要があります。ソフトウェアは「現状のまま」提供され、明示または黙示を問わず、商品性、特定目的への適合性、非侵害を含むいかなる保証もありません。著者または著作権者は、契約、不法行為、その他いかなる場合でも、請求、損害、その他の責任を負いません。ライセンスにはサポート、セキュリティ更新、保守の約束は含まれておらず、そのためこれらの事項はライセンス条件の一部ではありません。READMEにもサポート連絡先や問題報告の方法は記載されておらず、GitHub Sponsorsとドキュメントへのリンクのみが存在します。

Anime.js の確認では、同じページに通常の DOM 要素、SVG の属性、数値を持つ JavaScript オブジェクトを置きます。README のインストール方法で読み込み、各ターゲットの開始値と終了値、timeline の offset、loop、direction、完了コールバックを固定して記録します。開発者ツールで更新対象と長いアニメーションのフレーム時間を確認し、ライブラリの機能説明を端末やブラウザーの実測値へ置き換えないことが必要です。

編集部の結論

DOM や SVG の状態変化を JavaScript から細かく制御し、複数の動きをタイムラインで組み合わせたいフロントエンド開発者に向きます。CSS のみで完結する静的な遷移や、描画性能を README の説明だけで保証したいケースには向きません。先に公式サンプルと使用予定のブラウザーで要素、SVG 属性、JavaScript オブジェクトを一つずつ動かし、停止、再生、ループ、負荷時のフレーム表示を確認してください。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes