先週、私は友人がブラウザでSVGベースのスプライトシートを試すのを手伝っていました。私たちは、理想的なワークフローブラウザで高品質のアニメーション グラフィックを準備、公開、実行します。そのため、理想的には、小さなスマートフォン画面、タブレット、Retina ディスプレイ、デスクトップ ブラウザで機能するアニメーション データの単一のソースを用意する必要があります。
理論上は、(ベクターベースの) SVG が理想的ですが、SVG は通常それほど使用されていないため、テストすることにしました。アイデアは、SMIL SVG を使用しない (つまり SVG ベースのアニメーションを使用しない) というものでした。代わりに、アニメーション スプライト シート (通常、ラスター データ PNG/JPG で行うように) を作成し、これを純粋なベクター、つまり SVG で実行します。少し大きくなりましたが、これで機能するのであれば、さらに最適化されたものでも機能するでしょう。
さらに、フレームごとのベクター アニメーションはワークフローに大きな効果をもたらします。Flash エディターを使用してアニメーションを作成し、それを SVG スプライト シートにエクスポートできるようになります。
ともかく、結果は驚くほどうまくいったただし、一部の領域では失敗します (テスト目的で、Webkit ベースのブラウザー (Safari、Chrome、iOS のモバイル Safari、Android ICS) のみで動作したことに注意してください)。
CSS では、このようなスプライト シートのハードウェア アクセラレーションをトリガーするのは非常に簡単です (少なくともキーフレームとステップを備えた最新のブラウザーでは)。次のようにするだけです。
background-image: url(my.svg);
-webkit-animation: walk 1s steps(12, end) infinite;
ここで示すキーフレームベースのアニメーションを呼び出すには:
@-webkit-keyframes walk {
from { -webkit-transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(-100%, 0, 0); }
}
translate3d を使用すると GPU が起動し、iOS モバイル Safari および Android ICS ブラウザで全体がハードウェア アクセラレーションされるはずです。
驚くべきことに、これは一種の力ずくのテクニックであり、かなり大きなベクター アニメーション (テストでは 600 x 600 ピクセル) であるにもかかわらず、全体が飛びます。ただし、完璧ではありません。Safari では離陸前にちらつきます。ICS ブラウザーでは常にちらつくため、実際には使用できません。
そこで、ちらつきをなくすために次のような通常の方法を試しました。
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
しかし、それはうまくいきませんでした。そこで、SVGをメモリ内で動的にラスタライズし、テクスチャとして使用してみました。-webkit-transform: スケール3d(1, 1, 0)しかし、それは何の役にも立ちませんでした。
最終的に、複雑なベクターはブラウザには大きすぎると考え、SVG をレンダリングされた同じサイズの PNG/JPG スプライト シートに置き換えました。しかし、どうでしょう? 同じ問題です。つまり、SVG レンダリングではありません。これはブラウザの描画の問題です。さらにその証拠として、アニメーションを 1FPS に遅くしても、ちらつきは依然として残ります。
画像が GPU にとって大きすぎるのでしょうか? ブラウザ (特にモバイル) で快適に描画/アニメーション化できるパフォーマンスの限界に達していませんか?
ちらつきをなくすためのアイデアやハックがあれば、ぜひ教えてください（特に、動作が非常に速いので）。これは有望な技術です。さまざまな画面サイズに適応する高性能なブラウザアニメーションです。HTML5の聖杯;)
いくつかの最適化により、
<svg preserveAspectRatio="xMinYMax slice" viewBox="0 0 600 50">
そして、CSS マジックにより、SVG をコンテナーに完全に適合させ、単一の CSS クラスからサイズを変更できるようになりました。これは本当に素晴らしい効果を発揮しますが、残念ながらちらつきが生じます。
とにかく、お願いします詳細はこちらここでもやってみて。
ベストアンサー1
かなりクールなアイデアですね。
フレームの zindex を変更して、画像を重ねて表示するのはどうでしょうか。再描画中に最後のフレームがまだ表示されるため、ちらつきが解決される可能性があります。したがって、最新のフレームの zindex 値を増やし続けるだけです。もちろん、これには制限があり、zindex を再度リセットする必要がありますが、ちらつきを大幅に削減できる可能性があります。