Transitions.devの作成者であるJakub Antalik氏は、UIトランジションにおけるパフォーマンスの遅延に関する技術的な知見を共有しました。Antalik氏によると、遅延は多くの場合、ブラー効果がフレームごとに再実行される際や、マスクによって再描画が強制される際に発生するとのことです。

分析の結果、mask-positionをアニメーションさせると、コンポジット(合成)が回避され、代わりに要素の再描画が強制されることが示されています。その要素はdisplacement chain(変位チェーン)内に存在するため、フレームごとにフィルタ全体がCPU上で再実行され、パフォーマンスコストを増大させているとのことです。

これを解決するために、Antalik氏は、アニメーションさせるプロパティがペイントパス(描画経路)を完全に回避するようにすることを提案しています。提案されている手法の一つは、対象のフィールドを静的に描画して同じ色の「カーテン」で覆い、そのカーテンをtransform(変形)によって移動させることです。この手法では、波の動きが固定されたノイズの中を波及するのではなく、バンドと共に移動することになりますが、動きの中では視覚的な違いは区別できないと考えられています。


情報源: