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

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 を追加し、終了時に削除することをおすすめします。ただし、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 を追加または削除することで、要素ごと、アニメーション フレームごとに品質と速度を選択できます。

詳細については、上記の参照設計ドキュメントをご覧ください。

例

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

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