Animation Worklet Explainer - Web上でスムーズなアニメーションを目指す
HTML5の高い表現力によって、アニメーションはなくてはならないものになっています。しかしJavaScriptの書き方であったり、CSS3の使い方によってはアニメーションというのは非常に重たい処理で、スムーズに表示されなかったりします。 そんな現状を変えていこうと活動しているのがCSS Houdiniタスクフォースで、その活動の一端がAnimation Worklet Explainerで確認できます。
Animation Worklet Explainerの使い方
Animation Worklet Explainerはまだまだ新しい技術を使っているのでGoogle Chrome Canaryでないと良さが分からないようです。例えばスクロールでヘッダー部の大きさが変わるデモ。こちらはSafariです。
こちらはGoogle Chrome Canary。実際に操作してみるとスムーズさが違うように感じます。
別なデモ。スクロールするとDOMが重なり、スクロールが止まると元の状態に戻ります。こちらはSafari。
こちらはGoogle Chrome Canary。
別なアニメーション。アニメーションGIFにすると滑らかに見えませんが、実際に試すとスムーズです。
Animation Worklet Explainerはまだまだ一般的に使える訳ではありません。が、主要なブラウザベンダーがすべてタスクフォースに参加していますので、ここで作ったドラフトがW3Cに取り込まれれば、その多くが実装されていくのではないでしょうか。今後の技術遷移を占う上でも要チェックでしょう。
Animation Worklet ExplainerはCSS製、W3C Licenseのオープンソース・ソフトウェアです。