Konvertieren Sie animiertes SVG in einen Film

16955
Benjamin Wohlwend

Ich habe ein animiertes SVG und würde es gerne in einen Film umwandeln (eine Serie von Bildern würde das auch tun). Die Animation wird in Webkit-Browsern (Safari, Chrome) und in Batik's Squiggle gespielt . Ich habe versucht, es mit einem Bildschirmschreiber aufzunehmen. aber der Film endet ziemlich ruckartig.

Gibt es dafür ein gutes Werkzeug?

Hier ist eine Beispielanimation: 

<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>
20
Es gibt einen SVG-zu-APNG-Konverter (http://littlesvr.ca/apng/svg2png/). Wahrscheinlich kann ein anderes Tool verwendet werden, um aus dem APNG in einen Film zu konvertieren oder die Frames zu trennen. kartikmohta vor 14 Jahren 2
@kartikmohta: Füge das als Antwort hinzu. Mechanical snail vor 11 Jahren 1

3 Antworten auf die Frage

4
Manni

Ich habe einen Weg gefunden, die Bilderserie mit Hilfe von canvg zu erstellen . Um die folgende Seite auszuführen, müssen Sie ein modifiziertes Skript von canvg.js verwenden, in dem auf die Draw-Funktion zugegriffen werden kann.

Änderungen im Skript canvg.js (v1.0):

In Zeile 2321 ändern von:

var draw = function() {

zu:

svg.draw = function() {

In Zeile 2361 und 2390 wechseln Sie von:

draw();

zu:

svg.draw();

Mein Generierungsskript:

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

Haben Sie versucht, mit Squiggle eine Serie von Frames zu exportieren? Ich bemerkte, dass Squiggle einen Schmerz hat, um Ihre Linie genau dahin zu bringen, wo ich wollte, um eine Reihe von Frames richtig einzurichten. Sobald Sie das haben, können Sie imagemagick verwenden - anscheinend meine Lieblingsantwort dieser Woche ;-), um es nach Belieben umzuwandeln.

Angenommen, Sie speichern die Frames als frame01.svg, frame02.svg usw. ab. Dann gilt Folgendes:

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

erstellt ein einzelnes animiertes Gif aus Ihren Bildern, das für immer in einer Schleife von 5 ms zwischen den Bildern dargestellt wird.

convert konvertiert svg in, aber der Tag animateTransform wird von imagemagick nicht verarbeitet. Daher ist jede Ausgabe statisch.

Update: Ich fand es schwierig, mit Squiggle zu arbeiten (zumindest versuchte ich, die Animation an der richtigen Stelle zu stoppen, um ein Bild zu packen, es war mir peinlich, es sogar vorgeschlagen zu haben!

Hier ist ein Bash-Skript, das Imagemagick verwendet, um Ihre SVG in ein animiertes GIF zu konvertieren: Bevor Sie dieses Skript ausführen, teile ich Ihre Beispiel-SVG in zwei Teile auf: bg.svg enthält die elipse und das 'pit' -Element und hand.svg enthält nur die 'sec'. Element

`#!/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$.png rm tmp.png done  convert -delay 1 -loop 0 hand*.png anim.gif

~
Ich bin sicher, jemand, der schlauer ist als ich, könnte herausfinden, wie man die Konvertierung zusammenführt und alles in einem Schritt kombiniert, ohne auch die bg.png zu drehen.

Wollte dies auch einfach halten, nur für den Fall, dass es als Windows-BAT-Datei reimplementiert werden muss.

Das i = i + 5 ist ein Kompromiss zwischen dem Aussehen der Animation und der Dateigröße.

Hinweis: Selbst bei Verzögerung von 1 (1 ms zwischen den Bildern) bewegt Firefox den Zeiger nicht innerhalb von 5 Sekunden in einem vollständigen Kreis. Es war näher an 10 Sekunden.

Und hier ist was das Skript produziert hat

2
IOOI

Wenn Sie FireFox verwenden, versuchen Sie es mit SVG Render Plug: http://adasek.cz/svgrender/

Dies ist ein guter Vorschlag. Ich kann jedoch nicht herausfinden, wie die Aufnahme beginnen und enden kann, wenn die eigentliche Animation beginnt und endet. posfan12 vor 8 Jahren 0

Verwandte Probleme