3

そこで、アニメーションにcss3トランジションを使用する大規模なサイトを構築しています（要素トランジションとそのcssスタイルを操作するためにjaquery.transitを使用しています）。そして私は2つの問題に遭遇しました：

  1. FF（最新のアップデート）はtranslate3d（）レイヤーレンダリングにGPUを使用していません。おそらく私は間違っていて、mozillaはGPUアクセラレーショングラフィックスをまったく使用していません。私はまだそれを完全には理解していません。
  2. たとえばChromeでtranslate3d（）およびtranslateZ（）レイヤーレンダリングにGPUを使用するように仕向けたとしても、GPUが不良またはGPUがないコンピューターでは、これらのグラフィックスはひどいため、遷移の途中で開始と終了だけが表示されないことがあります。

質問：

  1. 遷移要素のFPSを改善するにはどうすればよいですか。たとえば、3200x3200のdiv回転、スケーリング、およびx、y軸での平行移動を同時に行うことができます。div'sその表面に5〜20個の要素が表示されていますか？
  2. おそらく、ブラウザがより単純なバージョンのサイトにリダイレクトする必要があるかどうかを知るのに十分なGPUサポートがあるかどうかを検出する方法がありますか？
4

2 に答える 2

1

WebGLはGPUを使用するため、すばらしいプロジェクトでは、WebGLがサポートされているブラウザーでGPUをチェックできます。http ：Modernizr //modernizr.com/news/

http://modernizr.com/docs/で確認Modernizr.webglしてください

于 2013-01-28T19:08:13.833 に答える
1

当時の主な問題は、画面上のすべてのPNGを再計算し、ブラウザで再コンパイルする必要があることでした。

パフォーマンスを最大化するために私がしなければならなかったことがいくつかありました。

  1. 画像には常に事前定義された属性がwidthあります。heightこれが行うことは、ブラウザに画像のサイズを知らせ、画像と一緒に使用した場合、scale()それらの画像を再計算および再コンパイルしないようにすることです。これらのものは非常に高価でした。つまり、基本的にscale()は、画像サイズを変更するだけで、すべてが完璧で、アニメーションも素晴らしかったのです。
  2. プロパティの使用を可能な限り回避するvisibilityことで、文字通りopacity: 0、要素をレイアウトに保持するように機能し、レイアウトの再計算がはるかに長くなります。可能な限り常に使用display: noneしてください。これにより、レイアウト計算から要素が完全に排除されます。除外するUIを再考するvisibility必要があり、使用されるDOMノード数を最小限に抑える必要があったため、これは大きな落とし穴でした。

全体的に、それは大きな冒険と大きな経験でした。この質問/回答が誰かに役立つことを願っています。

于 2016-05-09T14:32:33.250 に答える