Animasyonlu SVG'yi filme dönüştür

21

Animasyonlu bir SVG'm var ve onu bir filme dönüştürmek istiyorum (bir dizi resim de yapabilirdi). Animasyon, webkit tarayıcılarında (Safari, Chrome) ve Batik'in squiggle'ında oynatılır . Bir ekran görüntüsü yakalayıcıyla yakalamayı denedim. ama film oldukça sarsıntılı biter.

Bunun için iyi bir araç var mı?

İşte örnek bir animasyon:

<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
kaynak

2

Bir SVG to APNG çevirici var ( littlesvr.ca/apng/svg2png ), muhtemelen APNG'den filme dönüştürmek veya kareleri ayırmak için başka bir araç kullanılabilir.

— kartikmohta

1

@kartikmohta: Bunu bir cevap olarak ekleyin.

— Mekanik salyangoz,

4

Bir dizi kareyi dışa aktarmak için squiggle kullanmayı denediniz mi? Bir dizi karenin tam olarak kurulmasını istediğim yerdeki çizginizi elde etmek için bir ağrı buldum. Ancak, bir kez buna sahipseniz, imagemagick - görünüşe göre bu hafta en sevdiğim cevabı ;-) istediğiniz şekilde dönüştürmek için kullanabilirsiniz.

Her birinin kareleri, frame01.svg, frame02.svg, vb. Olarak kaydettiğinizi varsayalım. Sonra:

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

çerçeveler arasında sonsuza kadar dönen, çerçeveler arasında 5 msn tek bir animasyonlu gif oluşturur.

convert, svg'yi dönüştürür, ancak imagemagick, animateTransform etiketini işlemez, bu nedenle herhangi bir çıktı statiktir.

Güncelleme: Squiggle'ı çalışacak kadar acı verici buldum (en azından bir görüntüyü yakalamak için en doğru animasyonu durdurmaya çalışırken, bunu önerdiğim için bile utandım!

İşte svg'nizi bir animasyonlu gif'e dönüştürmek için imagemagick'i kullanan bir bash betiği: Bu betiği çalıştırmadan önce, örnek svg dosyanızı 2 parçaya böldüm : bg.svg elips ve 'pit' öğesini ve hand.svg ise sadece 'sec' içeriyor eleman

`#!/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

~
Benden daha zeki birinin bg.png'yi döndürmeden dönüştürmeyi nasıl birleştireceğini ve hepsini tek bir adımda birleştireceğini anlayabileceğinden eminim, ama bu ücretsiz olarak ne elde edeceğiniz ;-)

Ayrıca, sadece basit bir windows yarasa dosyası olarak yenilenmesi gerektiğinde, basit tutmak istedim.

İ = i + 5, animasyonun dosya boyutuna karşı düzgün görünmesi arasında bir denge oluşturuyor.

Not: Gecikmeli 1 (çerçeveler arasında 1 ms) olsa bile, firefox 5 saniye içinde elinizi tam bir dairede hareket ettirmez. 10 saniye yakındı.

İşte senaryo ne üretti

— DaveParillo
kaynak

4

Canvg yardımı ile bir seri resim oluşturmanın bir yolunu buldum . Aşağıdaki sayfayı çalıştırmak için, draw işlevinin erişilebilir olduğu, değiştirilmiş bir canvg.js betiğini kullanmanız gerekir.

Canvg.js betiğindeki değişiklikler (v1.0):

2321 numaralı hattan:

var draw = function() {

için:

svg.draw = function() {

2361 ve 2390 doğrultusunda:

draw();

için:

svg.draw();

Benim oluşturma betiğim:

<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>

— Manni
kaynak

3

FireFox kullanıyorsanız, denemek için SVG Render Plug'ı deneyebilirsiniz: http://adasek.cz/svgrender/

— IOOI
kaynak

Bu iyi bir öneri. Ancak, gerçek animasyon başladığında ve bittiğinde yakalamanın nasıl başlayıp biteceğini anlayamıyorum.

— posfan12