縮尺が変更されたときに合成レイヤを再ラスターする

Chris Harrelson
Chris Harrelson
X GitHub

要約

Chrome 53 以降では、will-change: transform CSS プロパティがない場合、変換スケールが変更されるとすべてのコンテンツが再ラスターされます。つまり、will-change: transform は「速くアニメーションしてください」という意味です。

これは、スクリプト操作によって行われる変換スケールにのみ適用され、CSS アニメーションまたはウェブ アニメーションには適用されません。

これにより、サイトの表示形式は見栄えが良くなりますが、下記の簡単な変更を行わなければ処理速度が遅くなる可能性があります。

ウェブ デベロッパーにとってのメリット

この変更の下で、will-change: transform は、コンテンツを固定ビットマップに強制ラスターすると考えることができます。固定ビットマップはその後、変換の更新によって変更されることはありません。これにより、デベロッパーはビットマップの移動、回転、スケーリングなどの変換アニメーションの速度を向上させることができます。

スケール変換と変換変換は区別されません。

非常に高速（つまり 60 fps）の変換アニメーション速度が必要な場合は、要素に will-change: transform を設定します。また、すべてのフレームで要素を高画質でラスタリングしても、速度が十分ではない場合。それ以外の場合は、will-change: transform は使用しないでください。

パフォーマンスと品質のトレードオフを最適化するには、アニメーションの開始時に will-change: transform を追加し、終了時に削除することをおすすめします。ただし、will-change: transform を追加または削除すると、1 回限りのパフォーマンス コストが頻繁に発生することに注意してください。

実装に関するその他の考慮事項

will-change: transform を削除すると、コンテンツが鮮明なスケールでラスタリングされますが、次のアニメーション フレームでのみ（requestAnimationFrame) を介して）ラスタリングされます。したがって、will-change: transform を含むレイヤがあり、単に再ラスターをトリガーしてからアニメーション化を続ける場合は、will-change: transform を削除してから、requestAnimationFrame() callback に再度追加する必要があります。

アニメーション中に現在のスケールでラスター処理する場合は、上記の手法を適用して 1 つのフレームで削除し、その後のフレームで will-change: transform を再度追加します。

これにより、コンテンツで合成レイヤが失われるという副作用が発生し、上記の推奨方法ではコストが若干高くなる可能性があります。これが問題となる場合は、このオペレーション中に合成レイヤに残るように、transform: translateZ(0) をコンテンツにも追加することをおすすめします。

影響の概要

この変更は、レンダリングされたコンテンツの品質、パフォーマンス、デベロッパーの管理に影響します。

  • レンダリング コンテンツの品質: 変形スケールをアニメーション化する要素のレンダリング出力は、デフォルトで常に鮮明になります。
  • パフォーマンス: will-change: transform が存在する場合のアニメーション変換が高速になります。
  • デベロッパーによる制御: デベロッパーは、
    will-change: transform を追加および削除することで、要素ごと、またはアニメーション フレームごとに品質と速度を選択できます。

詳しくは、上記のリファレンス設計ドキュメントをご覧ください。

例

この例では、この変更後も ID が remainsBlurry の要素はぼやけたままになりますが、ID が noLongerBlurry の要素は鮮明になります。これは、前者に will- change: transform CSS プロパティがあるためです。

実際のアプリケーションの変換スケール アニメーションの例