0

私がしばらく理解しようとしてきた本当にトリッキーな問題があります。基本的に、さまざまな速度で回転する複数の要素を持つ大きな回転ホイールを構築しています。約 5000px の正方形ですが、ビューポートはウィンドウの高さのパーセンテージです。スケーリングにより、ホイール自体は SVG であるため、すべてのデバイスでシャープに見えます。SVG にはかなり複雑なパスがいくつかあります。

説明するのは難しいので、私が話していることの最低限のデモを作成しました: http://jsfiddle.net/UsVeZ/3/e​​mbedded /result / (ここで編集: http://jsfiddle.net/ UsVeZ/13/ )。ドキュメントをクリックまたはタップして、ドキュメントが回転するのを確認します。

すべてがうまく見え、デスクトップ (Chrome + Safari) では問題なく動作しますが、iPad でホイールを回転させると、モバイル サファリではレンダリングが遅れます。回転アニメーション自体はかなりスムーズですが、レンダリングが追いつかないだけです。私の複雑な SVG (残念ながら共有することは許可されていませんが、デモではアイデアが得られます) ではさらに悪化します。iPadでチェックして、私が何を意味するかを確認してください。

この問題を解決する方法がよくわかりません.SVG全体をメモリに保持する方法があれば理想的です(レンダリングがどのように機能するのか、なぜそれが何をしているのか正確にはわかりません)。誰かが何かアイデアを持っていたり、別のアプローチ方法を持っているとしたら、それは素晴らしいことです。

4

4 に答える 4

1

これは完全な答えではなく、従うことができるいくつかの戦略です。

応募すれば…

body {
  -webkit-transform: scale(0.3);
}

Mobile Safari がどのように svg をキャッシュし、ピクセル化し、正しくレンダリングするかを確認できます。タップして待機すると、もう一度タップすると画像が再キャッシュされます。ただし、連続してタップすると、画像を再キャッシュする機会が与えられていないことに気付くでしょう。

これはjsfiddleでも発生します。連続してタップすると、最終的に途切れ途切れのブロックが発生しなくなります。

したがって、次のような無限のトランジションを作成して Safari に画像を再キャッシュさせない場合は...

$("svg").on("webkitTransitionEnd", function(){
  rotation -= .01;
  $("#large").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + rotation + "deg)");
  $("#small").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + ( rotation * 1.5 ) + "deg)");
});

そうすれば、キャッシュが古くなることはありません。

ただし、本体のスケールを削除すると、Safari はビューポート外のグラフィックをキャッシュしないようです。そのため、ロード時にホイールを完全に回転させると、イメージがキャッシュされます。

于 2012-07-10T18:40:46.367 に答える
0

そのため、実際の例では、この問題を適切に解決することはできませんでした。最終的に画像に戻り（大きな画像を9つの小さな画像に分割し、iOSの5 mp制限を回避するためにそれらを並べて表示しました）、各画像に、画像をキャッシュしているように見える次のプロパティを適用しました。

-webkit-transform-style: preserve-3d;

スケーリングはそれほどうまくいきませんが、スムーズに機能します。これはより重要です。

于 2012-07-18T08:08:21.953 に答える
0

実際にいくつかの異なる SVG を取り、iOS でそれらに回転を適用したところ、回転した瞬間にこのボックスが追加されました。SafariやChrome(デスクトップ)では複製できません。止めようと色々試しましたがダメでした。バグかどうかについて、オンラインで多くのフィードバックを見つけることができませんでした。

-webkit-transform:rotate(122deg); を適用するだけです。

例 - http://bit.ly/QnAgFK

特定の [object] タグには、Safari 6 の svg の周りに #documents add [html][body] タグがあることがわかりました。他のタグはありません。したがって、これは MIME タイプのホストの問題だと思いますが、.svg に image/svg+xml MIME タイプを追加しました。

于 2012-09-07T21:05:20.637 に答える
0

これには汚い修正があります。

#topParentId *{
   -webkit-transform-style: preserve-3d !important;
}

topParentId Id のすべての子に css を適用しましたが、これで問題なく動作します。出力のcssを少し変更しますが、私にとってはうまく機能します。

于 2016-12-20T04:50:54.853 に答える