blink の新しいウェブ アニメーション エンジンで CSS アニメーションと遷移を制御

Alex Danilo

ユーザーは、最新のマルチデバイス UI で滑らかな 60 fps のアニメーションを期待しています。ウェブの現在のアニメーション プリミティブでこのレベルのパフォーマンスを達成することは、困難な場合があります。幸いなことに、Chrome Canary でリリースされたばかりの Blink アニメーションの新しい実装に取り組んでいます。

この機能の素晴らしい点は、Blink の内部が簡素化され、Web Animations 1.0 仕様の新しい API 機能を組み込むための土台を築くことができることです。

これまで、CSS Animations と CSS Transitions は、個別に記述された個別の実装であり、必ずしもうまく連携するとは限りません。この数年間、ブラウザの実装者は次世代のアニメーション モデルの開発に協力してきました。同期、アニメーションの連続実行、アニメーション時間の任意の時点へのシーク、アニメーションの速度や逆方向の変更などをサポートしてきました。] この取り組みが W3C 仕様の Web Animations 1.0 につながりました。

Blink チームによるウェブ アニメーションの普及に向けた最初のステップは、既存の C++ の Blink CSS Animations/Transitions 実装を Web Animations エンジンに置き換えることです。このマイルストーンに達したため、できるだけ多くのデベロッパーに、不具合がないことをチェックして、さらに重要な点として、実装の取り組みを注視し、良い点/悪い点や変更の余地がある点についてフィードバックをお寄せください。

次は、JavaScript からアニメーションを作成、変更、確認できるようにする API の実装です。この API は、アニメーションを効率的に実行できるように設計されており(宣言型セマンティクスを使用して、JavaScript がアニメーションの作成を管理しますが、制御はブラウザに引き継がれます)、JavaScript デベロッパーには完全なアニメーション コントロールが公開されます。

優れたアニメーション制御に必要な機能を見逃さないよう、提案された API に対する積極的なフィードバックをお待ちしています。新機能と同様、仕様も引き続き変更されますので、ぜひこの機会に皆さんのご意見をお寄せください。できれば、メーリング リスト public-fx@w3.org への登録や投稿を行い、[Web Animations] を件名に追加して目に留まりやすくしましょう。

CSS のアニメーションとトランジションに使用されている新しいエンジンを今すぐお試しください。おかしな点がありましたら、Chromium のバグトラッカーに投稿して Google にお知らせください。

Blink に次世代のアニメーション機能を導入できることを嬉しく思います。また、新しいモデルの実装に取り組んでいる WebKitMozilla といった他のブラウザ デベロッパーと協力していきたいと考えています。