将SVG Animation转换为webm或mov

Question

我正在寻找一种可靠且易于执行的方法，将纯SVG动画转换为视频格式，最好是webm或mov。有问题的动画可以在这里找到 - 这是我个人的工作和学习如何处理SVG的结果：

https://jsfiddle.net/473btp7e/

令我惊讶的是，我的初始搜索仅产生了不完整的答案，结果往往不同。经过进一步研究，我发现this博客文章使用webm创建了一个SVG动画的MediaRecorder API。

有没有办法将所述脚本应用于我的动画，以便我得到一个webm作为结果。

Answer 1

如果仔细观察该示例中的代码，您将看到视频是通过将每个帧逐个绘制到连接到canvas的MediaRecorder上创建的。

所以你需要做同样的事情：暂停每一帧的动画，将该帧绘制到canvas上，为下一帧移动动画一点，然后重复。

在链接的示例中有用于在画布上绘制SVG的代码，因此棘手的部分是在任何给定时间暂停动画以制作帧，因为您的动画都是CSS。你可以通过暂停动画（animation-play-state: paused）和调整animation-delay来做到这一点。以下是一个例子：

https://codepen.io/Sphinxxxx/pen/zjXqej?editors=1010

所以你可以在你的代码中做类似的事情：

//Loop through all animated elements, and update their animation-delay.
//Together with "animation-play-state: paused", this freezes the animation at the specified time.
function freeze(time) {
    animed.forEach(x => {
        const css = x.style;

        if(!x.__originalDelay) {
            const delay = css.animationDelay;
            x.__originalDelay = delay.match(/\d/) ? delay : '0s';
        }

        css.animationPlayState = 'paused';
        css.animationDelay = `calc(${x.__originalDelay} - ${time}ms)`;
    });
}

更新的演示：

https://jsfiddle.net/473btp7e/2/

更新：更好的Firefox支持，以及使用requestFrame()手动控制每个帧的功能

https://jsfiddle.net/473btp7e/82/