在 HTML5 中播放来自 SVG 图像的动画

Question

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

继续讨论真正的问题；有没有办法在 HTML 中有效地完成这个？或者这么快在这么多不同的矢量图形之间切换会导致一些严重的滞后问题？如果有好的方法可以做到这一点，请您提供一个例子吗？

Answer 1

根据您的 SVG 的复杂程度，您可能会发现如果没有大量优化，足够快地替换 DOM 对象将是一个挑战（this answer 包含很多有用的细节和比较）

如何实现这一点的一个非常简单的 Javascript 示例是逐步遍历 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>