将动画 SVG 转换为电影

Question

我有一个动画 SVG，想把它变成一部电影（一系列图片也可以）。动画在 webkit 浏览器（Safari、Chrome）和 Batik 的波浪线中播放。我尝试用屏幕捕捉器捕捉它。但这部电影最终很生涩。

有什么好的工具吗？

这是一个示例动画：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <rect id="BB" x="0" y="0" height="100%" width="100%" fill="white"/>
    <g id="firstone" stroke="black">
        <g id="g3" fill="none" stroke-width="2">
            <animateTransform attributeName="transform" type="rotate" dur="5s" from="360 100 100" to="0 100 100" repeatCount="indefinite"/>
            <g id="g2">
                <ellipse id="g1" cx="100" cy="100" rx="75" ry="75">
                </ellipse>
                <g id="sec">
                    <line x1="100" y1="100" x2="45" y2="45" style="stroke: rgb(99, 99, 99); stroke-width: 6;"/>
                </g>
            </g>
        </g>
        <g id="pit">
            <line x1="100" y1="175" x2="100" y2="200" style="stroke: red; stroke-width: 6;"/>
        </g>
    </g>
</svg>

Answer 1

您是否尝试过使用波形图导出一系列帧？我发现用曲线将你的线条放在我想要的位置以正确设置一系列框架是很痛苦的。然而，一旦你有了这个，你就可以使用imagemagick - 显然是我本周最喜欢的答案;-) 来按照你喜欢的方式改变它。

假设您将每个帧保存为frame01.svg、frame02.svg等。那么：

convert -delay 5 -loop 0 frame??.svg animated.gif

将从您的帧中制作一个永久循环的动画 gif，帧之间间隔 5 毫秒。

Convert 会将 svg 转换为 ，但 imagemagick 不处理 animateTransform 标记，因此任何输出都是静态的。

更新：我发现使用波形曲线非常痛苦（至少试图在正确的位置停止动画以抓取图像，我什至都不好意思建议它！

这是一个使用 imagemagick 将 svg 转换为动画 gif 的 bash 脚本：在运行此脚本之前，我将示例 svg 分为两部分： bg.svg包含椭圆和“pit”元素，而 hand.svg仅包含“sec”元素

`#!/bin/bash`

rm *.png
rm anim.gif

convert bg.svg -crop 200x200+0+0 +repage bg.png
convert hand.svg -crop 200x200+0+0 +repage -transparent white hand.png

for ((i=1; i<=359; i=i+3))
do
  convert hand.png -gravity center -rotate $i tmp.png
  n=`printf "%03d" $i`
  composite -gravity center tmp.png bg.png hand${n}.png
  rm tmp.png
done

convert -delay 1  -loop 0 hand*.png anim.gif

~
我确信比我更聪明的人可以弄清楚如何合并转换并在一步中合并所有内容，而无需旋转 bg.png，但这是您免费获得的；-)

另外，希望保持简单，以防万一需要将其重新实现为 Windows bat 文件。

i=i+5 是动画看起来的平滑程度与文件大小之间的权衡。

注意：即使使用 -delay 1（帧之间 1 毫秒），firefox 也不会在 5 秒内将手移动一整圈。时间接近10秒。

这是脚本产生的结果