将动画SVG转换为电影

21

我有一个动画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>

animation svg

— 本杰明·沃尔文德（Benjamin Wohlwend）
source

2

有一个SVG到APNG转换器（littlesvr.ca/apng/svg2png），可能还有一些其他工具可用于将APNG转换为电影或分离帧。

— kartikmohta

1

@kartikmohta：补充一下。

— 机械蜗牛

4

您是否尝试过使用squiggle导出一系列帧？我发现很难使您的线条正好位于我希望它正确设置一系列框架的位置。但是，一旦有了它，就可以使用imagemagick-显然是本周我最喜欢的答案;-)可以按自己的喜好对其进行转换。

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

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

会从您的帧中制作出一个单独的动画gif，该帧永远循环播放，帧之间间隔5毫秒。

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

更新：我发现花键的使用非常痛苦（至少试图在适当的位置停止动画以获取图像，我很尴尬甚至没有提出建议！

这是一个使用imagemagick的bash脚本，将您的svg转换为动画gif：在运行此脚本之前，我将示例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秒。

这是脚本产生的

— 戴夫·帕里洛
source

4

我找到了一种在canvg的帮助下创建一系列图像的方法。要运行以下页面，您必须使用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>

— 曼尼
source

3

如果您使用的是FireFox，则可以尝试使用SVG渲染插件：http : //adasek.cz/svgrender/

— IOI
source

这是一个很好的建议。但是我无法弄清楚在实际动画开始和结束时如何开始和结束捕获。

— posfan12年