HTML5のSVG画像からアニメーションを再生する

Question

たとえば、ビデオのフレームに似るように設定された120のSVG画像があるとします。これらのSVG画像をHTML Webページに埋め込み、完全に制御できる速度（たとえば30または60 fpsなど）で再生できるようにするとします。さらに、ウェブページのベクトルグラフィックスとして画面上に表示されていることを確認して、ユーザーがどれくらい遠くにあってもきれいに見えるようにすることが目標です。だから本質的に私はラスターではなくベクトルである本当に短いビデオを持っています。

実際の質問にはそうです。 HTMLで効率的にこれを達成する方法はありますか？あるいは、非常に多くの異なるベクターグラフィックスを切り替えると、すぐに深刻な遅れの問題が発生するでしょうか？これを行う良い方法がある場合は、例を挙げてください。

Answer 1

は、あなたのSVGがどのように複雑なあなたはたくさんの最適化なしで挑戦になるだろう十分に速くDOMオブジェクトを置き換える見つけることによって

非常にシンプルなJavascriptを（this answer便利なディテールとの比較の多くが含まれています）これを実現する方法の例は、SVG項目の配列をステップ実行して、あなたのフレームレートに合わせたsetIntervalタイマーでスワップすることです（これはAndroidTVアプリケーションの背景読み込みアニメーションに基づいているコードを使用していますかなり信頼できる）

<svg height="200" width="200" id="svg"> 

</svg> 


<script> 

var fps = 30 
var f = 0 
var svgA = [ 
'<circle cx="50" cy="60" r="40" stroke="black"stroke-width="3" fill="red" />', 
'<circle cx="55" cy="62" r="42" stroke="black"stroke-width="4" fill="red" />', 
'<circle cx="60" cy="64" r="44" stroke="black"stroke-width="5" fill="red" />', 
'<circle cx="65" cy="66" r="46" stroke="black"stroke-width="6" fill="red" />', 
'<circle cx="70" cy="68" r="48" stroke="black"stroke-width="7" fill="red" />', 
'<circle cx="74" cy="70" r="50" stroke="black"stroke-width="8" fill="red" />', 
'<circle cx="77" cy="72" r="48" stroke="black"stroke-width="9" fill="red" />', 
'<circle cx="79" cy="74" r="46" stroke="black"stroke-width="8" fill="red" />', 
'<circle cx="80" cy="76" r="44" stroke="black"stroke-width="7" fill="red" />', 
'<circle cx="79" cy="74" r="46" stroke="black"stroke-width="6" fill="red" />', 
'<circle cx="77" cy="72" r="48" stroke="black"stroke-width="5" fill="red" />', 
'<circle cx="74" cy="70" r="46" stroke="black"stroke-width="4" fill="red" />', 
'<circle cx="70" cy="68" r="44" stroke="black"stroke-width="3" fill="red" />', 
'<circle cx="65" cy="64" r="42" stroke="black"stroke-width="2" fill="red" />', 
'<circle cx="55" cy="62" r="40" stroke="black"stroke-width="3" fill="red" />' 
] 

var i = setInterval(function() {nextFrame();}, 1000/fps); 


function nextFrame() { 
    document.getElementById("svg").innerHTML = svgA[f]; 
    f=(f+1)%svgA.length 
    if (f==0) { 
     clearInterval(i) 
    } 
} 

</script>