时间戳

首页 > 解决方案 > 如何将使用 javascript 动画的 SVG 导出为电影格式？

javascript - 如何将使用 javascript 动画的 SVG 导出为电影格式？

问题描述

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

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

像canvg这样的库首先将 SVG 转换为画布，这实际上是同一件事，但这是从javascript SVG 动画中获取电影文件的唯一方法吗？

标签： javascripthtmlsvgvideo

解决方案

您可以随时记录您的屏幕，例如。OBS在浏览器中播放您的 SVG（或您用来播放它的任何内容）和：

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

推荐阅读