BT

InfoQ ホームページ ニュース すべてのエバーグリーンブラウザでWeb Animations APIがサポートされた

すべてのエバーグリーンブラウザでWeb Animations APIがサポートされた

ブックマーク

原文(投稿日:2020/06/27)へのリンク

Safari 13.1のリリースに伴い、Web Animations APIはすべてのエバーグリーンブラウザに同梱されるようになった。

Webブラウザの初期のアニメーションは、通常、JavaScript APIを使用して作成されていた。このアプローチは柔軟性があったが、ブラウザがハードウェアアクセラレーションまたはレイアウトとレンダリングパイプラインへのフックを使用してアニメーションを最適化することが簡単にはできなかった。

CSS AnimationsCSS Transitionsは、2007年にWebKitチームによって最初に導入され、最終的にWeb標準になった。これらのAPIは使いやすく、初期のJavaScriptアニメーション実装の課題を克服している。

ただし、CSSアニメーションとトランジションには、特にアニメーションの動的作成、アニメーションの再生の制御、およびアニメーションのライフサイクルの監視に関して、既知の制限がある。

Web Animations APIは、CSSアニメーションとトランジションの最適化機能を提供するソリューションを導入し、以前のJavaScriptベースのAPIの柔軟性を備えている。Web Animations APIは、タイミングモデルとアニメーションモデルを介してWebアニメーションをプログラムで制御する。アニメーションは、JavaScriptを介して作成および制御され、再生速度、反復、イベントなどにアクセスできる。以前は、requestAnimationFrameまたは効率の悪いsetIntervalを広範囲に使用することでこれが可能であった。

Firefox、Safariなどの最新のブラウザ、およびChrome、Edge、BraveなどのすべてのChromiumベースのブラウザが、Webアニメーションをネイティブでサポートするようになった。以前のブラウザはweb-animations-js shimでWeb Animations APIを利用でき、Dojoなどのフレームワークはこの詰め木(shim)を利用して非エバーグリーンのWebアニメーションをサポートする

Web Animations 仕様は、Web上のアニメーションの共有モデルを提供する。CSS TransitionsとCSS Animationsは、共有される基本モデルの上にレイヤとして存在する。

Webアニメーションのデバッグは、すべてのエバーグリーンブラウザでサポートされている。SafariのWebインスペクタには、タイムラインタブのメディアとアニメーションタイムラインにアニメーションが含まれている。

Firefoxアニメーションインスペクターは、タイムラインに沿って同期されたアニメーションを表示する。これには、タイムラインの任意のポイントに移動してそのポイントでページを表示するために使用できるドラッグ可能なウィジェットが含まれる。Firefoxアニメーションインスペクターは、Webアニメーションで作成されたアニメーション、CSSアニメーション、CSS @keyframes ルールを表示する。

ChromiumベースのブラウザにはChrome DevTools Animation Inspectorが含まれており、開発者はアニメーションを検査および変更できる。Chrome Animation Inspectorは、CSSアニメーション、CSSトランジション、およびWebアニメーションをサポートしているが、requestAnimationFrameアニメーションはサポートしていない。

最新のすべてのブラウザでネイティブのWebアニメーションサポートと開発者ツールサポートを利用できるため、JavaScriptとWeb開発者は高速で効率的なネイティブアニメーションサポートを利用できる。この成熟点に到達するのに約15年かかりましたが、これはWebプラットフォームにとって大きな成果である。

Web Animationsは、W3Cワーキングドラフトの推奨事項である。コラボレーションとフィードバックは、W3C CSS Working Group GitHub リポジトリを介して促進される。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。