将动画 SVG 转换为电影

Question 1

您是否尝试过使用 squiggle 导出一系列帧？我发现使用 squiggle 很难将线条放在我想要的位置，从而正确设置一系列帧。但是，一旦有了它，您就可以使用图像魔法- 显然这是我本周最喜欢的答案 ;-) 按照你喜欢的方式进行转换。

假设你将每个帧保存为 frame01.svg、frame02.svg 等。然后执行以下操作：

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

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

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

更新：我发现使用波浪线非常痛苦（至少试图在正确的位置停止动画以抓取图像，我甚至很尴尬提出它！

下面是一个使用 imagemagick 将 svg 转换为动画 gif 的 bash 脚本：在运行此脚本之前，我将您的示例 svg 分成两部分： 背景.svg包含椭圆和“pit”元素， 手.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 秒。

以下是剧本的内容

Answer

您是否尝试过使用 squiggle 导出一系列帧？我发现使用 squiggle 很难将线条放在我想要的位置，从而正确设置一系列帧。但是，一旦有了它，您就可以使用图像魔法- 显然这是我本周最喜欢的答案 ;-) 按照你喜欢的方式进行转换。

假设你将每个帧保存为 frame01.svg、frame02.svg 等。然后执行以下操作：

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

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

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

更新：我发现使用波浪线非常痛苦（至少试图在正确的位置停止动画以抓取图像，我甚至很尴尬提出它！

下面是一个使用 imagemagick 将 svg 转换为动画 gif 的 bash 脚本：在运行此脚本之前，我将您的示例 svg 分成两部分： 背景.svg包含椭圆和“pit”元素， 手.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 秒。

以下是剧本的内容

Question 2

我找到了一种方法来创建一系列图像，借助坎夫格。要运行以下页面，您必须使用修改后的 canvg.js 脚本，其中 draw 函数可访问。

脚本canvg.js（v1.0）的变化：

将第 2321 行从：

var draw = function() {

到：

svg.draw = function() {

将第 2361 行和第 2390 行更改为：

draw();

到：

svg.draw();

我的生成脚本：

<html>
<head>
<script type="text/javascript" src="rgbcolor.js"></script> 
<script type="text/javascript" src="canvg.js"></script> 
<script type="text/javascript">

loadSVG = function() {
  canvg('canvas', '<animated SVG>', { ignoreMouse: true, ignoreAnimation: true });
}

function RenderNext(delta) {
    var c = document.getElementById("canvas");
    var svg = c.svg;

    for (var i=0; i<svg.Animations.length; i++) {
        svg.Animations[i].update(delta);
    }
    svg.draw();
}

function CreateImage(imgStr) {
    var oImg=document.createElement("img");
    oImg.setAttribute('src', imgStr);
    return oImg;
}

function start() {
    var c = document.getElementById("canvas");
    var result = document.getElementById("resultDiv");
    var maxDur = 5; // seconds
    var framerate = 5; // imgages per second

    for (var i = 0; i < framerate * maxDur; i++) {
        RenderNext(1000 / framerate);

        var oImg = CreateImage(c.toDataURL('image/png'));
        result.appendChild(oImg);
    }
}

</script>
</head>
<body onload="loadSVG()">

<canvas id="canvas" width="30px" height="30px"></canvas> 

<p>
<input type="button" id="start" value="Start" onclick="start()" /> 
</p>

<div id="resultDiv">
</div>

</body>
</html>

Answer