Converti SVG animato in film

21

Ho un SVG animato e vorrei trasformarlo in un film (farebbe anche una serie di immagini). L'animazione viene riprodotta nei browser webkit (Safari, Chrome) e in Batik's Squiggle ). Ho provato a catturarlo con un cattura schermo. ma il film finisce piuttosto a scatti.

C'è un buon strumento per questo?

Ecco un esempio di animazione:

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

2

Esiste un convertitore da SVG a APNG ( littlesvr.ca/apng/svg2png ), probabilmente alcuni altri strumenti possono essere utilizzati per convertire da APNG a un film o separare i frame.

— kartikmohta,

1

@kartikmohta: aggiungilo come risposta.

— Lumaca meccanica

4

Hai provato a usare squiggle per esportare una serie di frame? Ho trovato un dolore tremolante per ottenere la tua linea proprio dove volevo che fosse impostare correttamente una serie di frame. Tuttavia, una volta che lo hai, puoi usare imagemagick - apparentemente la mia risposta preferita questa settimana ;-) per trasformarlo come preferisci.

Supponendo che ciascuno salvi i frame come frame01.svg, frame02.svg, ecc. Quindi questo:

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

creerà una singola gif animata dai tuoi frame che gira per sempre, 5 ms tra i frame.

convert convertirà svg in, ma imagemagick non elabora il tag animateTransform, quindi qualsiasi output è statico.

Aggiornamento: ho trovato lo squiggle così doloroso con cui lavorare (almeno cercando di fermare l'animazione nel punto giusto per catturare un'immagine, ero imbarazzato di averlo persino suggerito!

Ecco uno script bash che usa imagemagick per convertire il tuo svg in una gif animata: prima di eseguire questo script ho diviso il tuo svg di esempio in 2 parti: bg.svg contiene l'elipse e l'elemento 'pit' e hand.svg contiene solo il 'sec' elemento

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

~
Sono sicuro che qualcuno più intelligente di me potrebbe capire come unire il convertito e combinare tutto in un passo senza ruotare anche bg.png, ma questo è ciò che ottieni gratuitamente ;-)

Inoltre, volevo mantenerlo semplice, nel caso in cui debba essere reimplementato come file bat di Windows.

I = i + 5 è un compromesso tra l'aspetto uniforme dell'animazione e la dimensione del file.

Nota: anche con -delay 1 (1 ms tra i frame), Firefox non sposta la mano in un cerchio completo in 5 secondi. Era più vicino a 10 secondi.

Ed ecco cosa ha prodotto la sceneggiatura

— DaveParillo
fonte

4

Ho trovato un modo per creare la serie di immagini con l'aiuto di Canon . Per eseguire la pagina seguente, è necessario utilizzare uno script modificato di canvg.js in quanto la funzione di disegno è accessibile.

Modifiche nello script canvg.js (v1.0):

Nella riga 2321 cambia da:

var draw = function() {

a:

svg.draw = function() {

Nella riga 2361 e 2390 cambia da:

draw();

a:

svg.draw();

Script della mia generazione:

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

3

Se stai usando FireFox potresti provare SVG Render Plug in: http://adasek.cz/svgrender/

— IOOI
fonte

Questo è un buon suggerimento Ma non riesco a capire come far iniziare e terminare l'acquisizione quando inizia e finisce l'animazione vera e propria.

— posfan12,