AnimeJs v4 リリース

• Anime.js は、Web 上のあらゆるものをアニメーション化できる高速で多用途な JavaScript ライブラリ
• V4 では全体構造を新たに書き直し、性能を大幅に向上させるとともに、API もよりモダンな形に再編
• 特に ES Module 対応、ツリーシェイキング最適化、複雑なアニメーション合成の改善などにより、開発者体験が向上

Anime.js V4 の主な変更点まとめ

• ES モジュール化と API 変更

  • すべての機能が ES モジュールとして提供されるようになった (anime() → animate())
  • ツリーシェイキングに有利で、必要な機能だけを読み込んで使用可能
  • anime({ targets }) → animate(targets, params) 形式に変更

• 主な API 変更点

  • easeInOutQuad → 'inOutQuad' (接頭辞を削除)
  • コールバック関数名の変更:
    • begin() → onBegin()
    • update() → onUpdate()
    • complete() → onComplete()
    • change() → onRender()
    • ループ関連のコールバックは onLoop() ひとつに統合
  • .finished → .then() に変更され、Promise の処理方法も変わった
  • { value: 100 } → { to: 100 } に値の表現を変更
  • round: 100 → modifier: utils.round(2) により、より柔軟な数値変更が可能

• アニメーション構成と合成の改善

  • デフォルトの easing 値が outQuad に変更
  • 同一ターゲットに同一プロパティのアニメーションが重複した場合、デフォルトで以前の tween をキャンセル (composition: 'replace')
    • composition: 'none' → V3 方式 (ネスト許可)
    • composition: 'add' → 加算アニメーションを適用可能

• 再生方式に関する変更

  • direction: 'reverse' または 'alternate' → reversed: true, alternate: true に分離され、同時に使用可能
  • loop: 1 → デフォルトのループは 0 に変更

• タイムライン (Timeline) システムの改善

  • anime.timeline() → createTimeline() に変更
  • 子アニメーションで loop, reversed を使用可能
  • defaults プロパティで子要素の共通オプションを設定可能
  • set(), label, stagger() など、より柔軟なタイミング制御機能を追加
  • CSS transform プロパティが子アニメーション間でより自然につながるようになった

• Stagger と SVG アニメーション

  • anime.stagger() → stagger() を直接読み込んで使用
  • anime.path() → svg.createMotionPath() を使用
  • strokeDashoffset, points などの SVG プロパティも svg.drawLine(), svg.morphTo() などで処理

• ユーティリティ関数の分離

  • anime.get() → utils.get()
  • anime.set() → utils.set()
  • anime.remove() → utils.remove()
  • anime.round() → utils.round()

• エンジン設定の変更

  • anime.suspendWhenDocumentHidden = false → engine.pauseWhenHidden = false
  • anime.speed = 0.5 → engine.playbackRate = 0.5

• パフォーマンスと構造の改善

  • コード全体のリファクタリングにより、メモリ使用量を削減し性能を向上
  • Tween システムの再設計により、重複アニメーション時のバグを減少
  • composition: 'add' により加算アニメーションをサポート
  • CSS Transform 構成時の自然な連続性を改善

新機能

• CSS 変数アニメーション対応: 例) animate('#target', { '--radius': '20px' })
• from アニメーション対応: { from: 50, to: 100 } 形式を使用可能
• hex カラーで alpha をサポート: 例) #FF4433AA 形式に対応
• createTimer 機能を導入:
  • setTimeout, setInterval の代替
  • onLoop, onUpdate, onComplete などを使用可能
  • frameRate の調整によりゲームループなどへ活用可能
• 可変フレームレート対応: アニメーション、タイムライン、タイマーごとに個別設定可能

Anime.js の特徴

• 直感的な API

  • 使いやすく強力なアニメーション API を提供
  • プロパティごとのパラメータと柔軟なキーフレームシステムをサポート
  • 組み込み easing 機能と強化された変換機能を提供

• SVG ツールセット

  • 組み込みの SVG ユーティリティにより、形状変形、モーションパス追従、線描画を簡単に実行可能
  • 形状変形、線描画、モーションパス機能を含む

• スクロールオブザーバー

  • スクロールに応じてアニメーションを同期・トリガーできる Scroll Observer API を提供
  • さまざまな同期モードと高度なしきい値をサポート

• 高度なスタッガリング

  • 組み込みの Stagger ユーティリティ関数で、短時間で印象的な効果を作成可能
  • 時間スタッガリング、値スタッガリング、タイムライン位置スタッガリングを含む

• スプリングとドラッグ機能

  • Draggable API により HTML 要素をドラッグ、スナップ、フリック、投擲できる
  • 多様な設定、包括的なコールバック、有用なメソッドを提供

• タイムライン API

  • 強力なタイムライン API により、アニメーションシーケンスを調整しコールバックを同期可能
  • アニメーション同期、高度な時間位置、再生設定をサポート

• レスポンシブアニメーション

  • Scope API を使って、メディアクエリに簡単に反応するアニメーションを作成可能
  • メディアクエリ、カスタムルート要素、スコープメソッドを含む。

[kaydash]

わあ、すごい

[GN⁺]

Hacker Newsの意見

• あのランディングページは、スクロールしたときに予想をはるかに上回る滑らかさと速さを感じた
• これが実在するとは信じがたいほどよくできていた。2000年代初頭のインターネットの創造性が、現代の洗練されたデザイン基準と出会ったような感じだった
• あのホームページは、モバイルブラウザで非常に滑らかに動作する、最も複雑でレイヤーの多いインタラクティブアニメーションのひとつだった。FPSはまるで高性能PCで動く Doom 2016 のように感じられた
• スクロールジャッキングを嫌いにならなかったのは今回が初めてだった。実際、とても滑らかだった
• メインサイトがすごいと思っていたが、ドキュメントを見て本当に驚いた。よくやった。WAAPIを試すのがとても楽しみだ
• このページは気に入っているが、Firefox(136.0.3)で uBlock Origin を有効にした状態で <a href="https:&#x2F;&#x2F;animejs.com&#x2F;documentation&#x2F;scope&#x2F;" rel="nofollow">https://animejs.com/documentation/scope/</a>; にアクセスすると、タブが即座にクラッシュする。非常に印象的なイントロアニメーションをスクロールした直後だったので、なかなか面白い体験だった
• ブラウザのスクロールインジケーターをつかんでドラッグでき、アニメーションが滑らかに更新される点が気に入っている (safari mobile)
• 自分のCPUが古すぎるか、あるいは非主流のブラウザ(Microsoft Edge)を使っているのかもしれないが、ウェブサイトは<i>非常に</i>遅く（1秒あたり1回未満の更新）、タブはすぐにCPUの80%を使い始め、ファンが大きな音を立てる。第8世代 Intel i7 を使っている
• 自分が使っている非主流のAndroidブラウザでは本当によく動作する。ライブラリについては高く評価できる
• ランディングページは素晴らしかった
  • 唯一の問題は、レスポンシブレイアウトのサンプルを確認するときにブラウザウィンドウのサイズを変更すると、スクロールが一番上にリセットされることだった