【ウェブアニメーションズエーピーアイ】
Web Animations API とは？
公開:
💡 CSSアニメーションをJavaScriptで自在に操る、アニメーション制御のリモコン
📌 このページのポイント
- CSSアニメーションと同じブラウザエンジンで動作するJavaScript APIでパフォーマンスが高い
- element.animate()で簡単にアニメーションを作成し、play/pause/reverseなどで動的に制御できる
- CSSでは難しい条件分岐やユーザー操作に応じたインタラクティブなアニメーションが実現可能
ひよこ CSSアニメーションがあるのに、わざわざJavaScriptでアニメーションを作る必要あるの？
ペンギン先生 CSSアニメーションは宣言的で簡単だけど、「ユーザーのドラッグに追従する」とか「途中で一時停止して逆再生する」みたいな動的な制御は苦手なんだ。Web Animations APIならそういったインタラクティブな制御がJavaScriptで簡単にできるよ
ひよこ element.animate()ってどう使うの？
ペンギン先生 element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500 })のように、キーフレームとオプションを渡すだけだよ。戻り値のAnimationオブジェクトでplay()、pause()、reverse()、finish()などが呼べるんだ
ひよこ jQueryのanimate()やGSAPとはどう違うの？
ペンギン先生 jQueryやGSAPはJavaScriptでスタイルを毎フレーム書き換えるけど、Web Animations APIはブラウザのアニメーションエンジンに処理を任せるからパフォーマンスが段違いなんだ。CSSアニメーションと同じくコンポジタースレッドで動作するから、メインスレッドが重くてもなめらかに動くよ
ひよこ CSSアニメーションとの使い分けはどうすればいい？
ペンギン先生 単純なホバーエフェクトやローディングアニメーションはCSSで十分。ユーザー操作に応じた動的な制御、複数アニメーションの同期、完了を待ってから次の処理を実行するといったケースではWeb Animations APIが向いているよ。getAnimations()で要素にかかっているアニメーションを取得・制御できるのも便利だね
まとめ：ざっくりこれだけ覚えればOK！
📖 おまけ：英語の意味
「Web Animations API」 ＝ Webアニメーション API
💬 CSSアニメーション・CSSトランジション・JavaScriptアニメーションを統一的に扱える基盤APIとして設計されたものだよ