Javascript 在HTML5中播放SVG图像中的动画

假设我有120个SVG图像，它们的设置方式类似于视频帧。假设我想将这些SVG图像嵌入到中的HTML网页中，以便它们以我完全控制的速率播放（例如，30或60 fps）。此外，我们的目标是确保它们仍然以矢量图形的形式显示在屏幕上，这样无论用户放大多远，它们仍然看起来清晰。所以基本上我会有一个很短的视频，是矢量的，而不是光栅的

---

如此一来，真正的问题就来了；有没有什么方法可以在HTML中有效地实现这一点？或者在这么多不同的矢量图形之间切换会导致一些严重的滞后问题吗？如果有一个很好的方法可以做到这一点，请您提供一个示例？

根据SVG的复杂程度，您可能会发现，如果不进行大量优化（包含大量有用的细节和比较），快速替换DOM对象将是一个挑战

如何实现这一点的一个非常简单的Javascript示例是逐步遍历SVG项数组，并在与帧速率对齐的setInterval计时器上交换它们（我使用了基于此的代码在AndroidTV应用程序上后台加载动画，它工作得非常可靠）

var fps=30
var f=0
var svgA=[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
''
]
var i=setInterval（函数（）{nextFrame（）；}，1000/fps）；
函数nextFrame（）{
document.getElementById（“svg”）.innerHTML=svgA[f]；
f=（f+1）%svgA.length
如果（f==0）{
净空间隔（i）
}
}

<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>