如何将使用 javascript 制作的 SVG 动画导出为电影格式? [英] How to export SVG animated with javascript to movie format?

问题描述

我一直在使用名为 SVG.js 的库制作动画，该库使用 javascript 和 requestAnimationFrame动画 SVG 元素而不是提供的 SMIL <animate> 标签.

I've been making animations with a library called SVG.js, this library uses javascript and requestAnimationFrame to animate SVG elements instead of the supplied SMIL <animate> tag.

有没有办法在动画范围内将 标签的内容转换为位图图像每秒 60 帧?或者更好的是，将对 requestAnimationFrame 的调用编译成电影?

Is there a way to convert the contents of an <svg> tag into a bitmap image 60 frames per second over the extent of an animation? Or better yet, compile the calls to requestAnimationFrame into a movie?

像 canvg 这样的库首先将 SVG 转换为 canvas，这是有效的同样的事情，但这是从 javascript SVG 动画 中获取电影文件的唯一方法吗?

Libraries like canvg first convert the SVG onto canvas which is effectively the same thing, but is this the only way to get a movie file out of a javascript SVG animation?

推荐答案

您可以随时使用例如录制屏幕.OBS 在浏览器中播放您的 SVG(或您用来播放的任何内容)和:

You can always record your screen with eg. OBS playing your SVG in the browser (or whatever you use to play it) and :

1. 从 https://obsproject.com/ 获取 OBS，安装它，运行并学习如何录制屏幕.就像点击开始录制按钮"一样简单.在应用程序窗口的右下角.
2. 在您使用的首选浏览器或播放器中打开您的 SVG.如果可能，请将其设为全屏.确保您可以轻松地重新启动动画 - 例如使用 CTRL+R 刷新浏览器窗口.
3. 切换到 OBS 并开始录制(在 Mac OS 上，您可以从菜单栏开始).
4. 切换到浏览器或播放器并重播您的 SVG 动画.停止后稍等片刻，留出足够的间隙供以后编辑.
5. 切换回 OBS 并停止录制.视频保存为 MP4 - 检查质量，如果质量不够，请更改 OBS 设置并重试.

1. Get OBS from https://obsproject.com/, install it, run and learn how to record your screen. It's easy as hitting the "start recording button" on the right bottom of the app window.
2. Open your SVG in your preferred browser or player you use. If possible, make it full screen. Make sure you can restart animation easily - like using CTRL+R to refresh the browser window.
3. Switch to OBS and start recording (on Mac OS you can start it from the menu bar).
4. Switch to browser or player and replay your SVG animation. Wait for a second after it stops, to have enough gap for editing later.
5. Switch back to OBS and stop recording. Video is saved as MP4 - check the quality, if not enough, change OBS settings and try again.

这篇关于如何将使用 javascript 制作的 SVG 动画导出为电影格式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！