アニメーションSVGをムービーに変換する

21

アニメーション化されたSVGがあり、それをムービーに変換したい（一連の画像でも同様です）。アニメーションは、WebKitのブラウザ（Safariの、クローム）にし、バティックの中で果たしている波線）。スクリーンキャプチャーでキャプチャしてみました。しかし、映画はかなりぎくしゃくしています。

これに適したツールはありますか？

アニメーションの例を次に示します。

<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

— ベンジャミン・ウォルウェンド
ソース

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

は、フレーム間で5ミリ秒、永久にループする単一のアニメーションGIFを作成します。

convertはsvgをに変換しますが、imagemagickはanimateTransformタグを処理しないため、出力はすべて静的です。

更新：squiggleの操作は非常に苦痛でした（少なくとも、画像を取得するためにアニメーションを適切な場所で停止しようとして、提案することさえ恥ずかしかったです！

ここでは、アニメーションGIFにあなたのSVGを変換するためのImageMagickを使ってbashスクリプトです：このスクリプトを実行する前に、私は2つの部分にあなたの例のSVGを分割： bg.svgは elipseが含まれていると「ピット」要素と hand.svgは単に「秒」を含みます素子

`#!/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秒に近かった。

そして、これがスクリプトが生成したものです

— DaveParillo
ソース

4

canvgを使用して一連の画像を作成する方法を見つけました。次のページを実行するには、描画関数にアクセスできるという点で、canvg.jsの変更されたスクリプトを使用する必要があります。

スクリプト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>

— マンニ
ソース

3

FireFoxを使用している場合、SVG Render Plugを試してみることができます：http：//adasek.cz/svgrender/

— IOOI
ソース

これは良い提案です。しかし、実際のアニメーションが開始および終了するときにキャプチャを開始および終了する方法はわかりません。

— -posfan12