-webkit-transform と -webkit-transition を使用して複雑な 60 fps アニメーションを実行する非常に複雑な Web アプリがあります。多くの場合、数十のアイテムが同時にアニメーション化されます。「スピードアップ」している場合、アニメーションは見栄えがしますが、ユーザーが入力を行うと、アニメーションの「スローダウン」がはっきりとわかる場合があります。アニメーションの多くは非常にパフォーマンスが高いですが、多くの項目が静的から移動に移行するときに、JavaScript で見つけることができなかった認識可能な遅延があります。
質問する
802 次
1 に答える
4
これは追跡が困難でしたが、完全に修正しました。
問題は、3D トランスフォームを持たないオブジェクトが突然 3D トランスフォームを取得すると、その要素のビットマップがビデオ カードに送信される間に「ストール」が発生することです。これを行うアイテムがたくさんある場合、非常に目立ち、60 fps のエクスペリエンスが ... より少なくなる可能性があります。
答えは非常に簡単です。アイテムが現時点で 3D でない場合でも、「null」の 3D 変換を保持します。こうすることで、画像がビデオ カードに早期に転送され、アニメーション化する必要があるときに大きな遅延が発生することはありません。
これは機能します: -webkit-transform: translateZ(1px)
これはうまくいくかもしれませんが、将来のバージョンでは最適化されると想像できます (目に見える効果がないため) -webkit-transform: translateZ(0px)
于 2012-06-15T00:15:03.660 に答える