nicht angemeldet
70 SVG Grafiken zu einer Animation verarbeiten
Hallo und ein Happy New Year,
wie kann man bitte am besten mit open source Software die auf Linux läuft SVG Grafiken animieren?
Insbesondere wäre interessant zu wissen, wie man 70 einzelne SVG's zu einer Animation vereinen kann.
Kurze Erklärung zu den Randumständen:
- Derzeit handelt es sich um ein animiertes GIF mit circa 70 verschiedenen Ebenen.
- Da die Qualität richtig mies ist, und sich das Bild (da Pixelgrafik) auch
nicht ohne Qualitätsverlust skalieren lässt, würde ich das nun gerne als SVG Grafik realisieren.
So richtig krass geniale Menschen können SVG's von Hand animieren (durch coden) - da es sich aber hier nur um eine mehr oder minder einmalige Aufgabe handelt, wäre der Aufwand, das zu lernen, viel zu groß.
Das Programm Inkscape scheint ja sehr Anwenderfreundlich zu sein, aber einen richtigen Timeframe kennt es (soweit ich das herausfand) leider nicht.
Das heißt, dass sich Inkscape selbst meines Erachtens nicht wirklich zur Animation eignet.
Dann fand ich das Programm "synfigstudio".
Das scheint ja echt genial zu sein, aber bis ich da die ganzen Layer abgearbeitet habe, bin ich auch alt und grau.
Also, wie gesagt, synfigstudio könnte es wirklich, aber die Handhabung des Programmes emfand ich als extrem komplex.
Mit "Snap.svg" lief mir dann eine sehr vielversprechende Javascript Bibliothek über den Weg.
Aber auch hier würde das coden der 70 Einzelbilder keinen Sinn ergeben (da viel zu zeitaufwändig)
Meine Überlegung ist also die:
*) Ich nehme den GIMP, um die einzelnen 70 Frames mittels Pfaden nachzuzeichnen.
*) Dann exportiere ich die ganzen 70 Pfade in einzelne SVG's (das kann der GIMP!)
Die Frage ist nun, mittels welcher Technik ich es schaffe, die einzelnen 70 SVG Bilder zu einer einzigen Animation zusammenzufügen.
Das kann angeblich Snap.svg sogar, aber wie, fand ich auch noch nicht raus.
Hat jemand eine gute Idee?
Vielen Dank!
Liebe Grüße,
Rene M.
-
hi,
Hat jemand eine gute Idee?
klar. Wenns im Browser laufen soll: Numerierst die Bilderchen durch und machst ein Preload. Wenn das letzte Bild angkommen ist: Film ab. Ein Browser kann mehr als 70 Bilder/Sekunde zeigen, wenn die Bilder einmal im Cache sind.
Ansonsten guck mal bei Ulead (GIF Animator)
Horst
-
Hallo,
Insbesondere wäre interessant zu wissen, wie man 70 einzelne SVG's zu einer Animation vereinen kann.
Eine sehr interessante frage! Das einfachste was mir einfällt ist es die Bilder vorzuladen (wie Hotti schon sagte) und sie dann schnell auszutauschen.
Ich hab mal ein script geschrieben das das macht:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>animated SVG</title> <style type="text/css"> [code lang=css]#preload { display: none; }</style><script>
var currentAnimationState = 0, stepLength = 20, // in Millisekunden canvas = null, urls = [], start = null; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame; function initAnimation() { canvas = document.querySelector("#canvas"); var imgs = document.querySelectorAll("#preload img"); for (var i = 0; i < imgs.length; i++) { urls.push(imgs[i].src); } canvas.src = urls[currentAnimationState]; requestAnimationFrame(step); } function nextImage(steps) { currentAnimationState = (currentAnimationState + steps) % urls.length; canvas.src = urls[currentAnimationState]; } function step(timestamp) { if(start == null) start = timestamp; var progress = timestamp - start; if(progress > stepLength) { nextImage(parseInt(progress / stepLength, 10)); start = null; } requestAnimationFrame(step); }</script>
</head>
<body onload="initAnimation()">
<img id="canvas">
<div id="preload">
<img src="s0.svg">
<img src="s1.svg">
<img src="s2.svg">
<img src="s3.svg">
<img src="s4.svg">
<img src="s5.svg">
</div>
</body>
</html>[/code]Hier ne live vorschau: http://jeenaparadies.net/t/self/animatedSVG/
Es ist etwas kompliziert weil es versucht langsamme Rechner auszugleichen indem es Bilder in der Animation überspringt falls der Rechner es nicht hinbekommt sie so schnell auszutauschen. Deshalb kein setTimeout() sondern requestAnimationFrame().
Du kannst es wohl schon so verwenden aber natürlich wäre es mir lieber wenn du daraus lernen könntest, so wenn irgendetwas unverständlich im Script ist frage gerne und ich werde versuchen darauf zu antworten.
/Jeena
-
Hallo,
Ach ja und die einfachere Variante mit setInterval() wäre dann:
var currentAnimationState = 0, stepLength = 50, // in ungefähren Milisekunden canvas = null, urls = []; function initAnimation() { canvas = document.querySelector("#canvas"); var imgs = document.querySelectorAll("#preload img"); for (var i = 0; i < imgs.length; i++) { urls.push(imgs[i].src); } canvas.src = urls[currentAnimationState]; setInterval(nextImage, stepLength); } function nextImage() { currentAnimationState = (currentAnimationState + 1) % urls.length; canvas.src = urls[currentAnimationState]; }/Jeena
-
hi,
Eine sehr interessante frage! Das einfachste was mir einfällt ist es die Bilder vorzuladen (wie Hotti schon sagte) und sie dann schnell auszutauschen.
Film ab;
Horst
-
-
Insbesondere wäre interessant zu wissen, wie man 70 einzelne SVG's zu einer Animation vereinen kann.
Als SVG-Animation?
So richtig krass geniale Menschen können SVG's von Hand animieren (durch coden) -
Ich würde mich nicht als krass genial bezeichnen, zumindest nicht als krass und nicht mal als genial bezüglich SVG. :-) Außerdem bin ich ein wenig raus. Meine Diplomverteidigung (lief im IE6 mit SVG-Viewer) enthielt als eine meiner ersten SVG-Anmationen ein Diagramm, welches x- und y-Werte von Graphen über eine weitere Größe animiert hat. Sonst hätte ich ein Kennfeld darstellen müssen.
90% meiner Kenntnisse habe ich von http://www.selfsvg.info/, vielleicht gibt es mittlerweile bessere Anlaufstellen.
Das Programm Inkscape scheint ja sehr Anwenderfreundlich zu sein, aber einen richtigen Timeframe kennt es (soweit ich das herausfand) leider nicht.
Das heißt, dass sich Inkscape selbst meines Erachtens nicht wirklich zur Animation eignet.Kein Programm, was ich je ausprobiert habe, Inkscape war dabei, hat je SVGs erzeugt, die außerhalb des Programms wie gewünscht dargestellt wurden. Wobei es da um halbwegs komplizierte Sachen wie Positions-Offsets von Text entlang eines Pfades o.ä. ging. Das ist aber schon eine Weile her, die Programme können besser geworden sein (wenn die Macher bereit waren Fehler als solche und nicht als die Umsetzung des Standard anzusehen). Einfaches hat funktioniert.
Animationen habe ich nie mit solchen Programmen zu erstellen versucht.
Das scheint ja echt genial zu sein, aber bis ich da die ganzen Layer abgearbeitet habe, bin ich auch alt und grau.
Sind die Bilder denn so geartet, daß es Layer braucht? Kann man das Gleiche nicht mit Form- Farb- und Positionsänderung von Elementen erreichen? Wenn es eher darum geht Bilder auszuwechseln ist eine SVG-Animation vermutlich wirklich nicht die beste Lösung, von der Browserunterstützung mal ganz abgesehen.
Meine Überlegung ist also die:
*) Ich nehme den GIMP, um die einzelnen 70 Frames mittels Pfaden nachzuzeichnen.
*) Dann exportiere ich die ganzen 70 Pfade in einzelne SVG's (das kann der GIMP!)Besteht jedes Bild nur aus einer irgendwie geformten Fläche vor Hintergrund? Möglicherweise sogar nur ein Polygon? Man kann die Punkte eines Polygons entlang eines Pfades verschieben.
Die Frage ist nun, mittels welcher Technik ich es schaffe, die einzelnen 70 SVG Bilder zu einer einzigen Animation zusammenzufügen.
Ich habe schon php-Programme geschrieben, welche mir aus Datensätzen den Quelltext für animierte und nichtanimierte SVGs* erzeugt haben. Der Programmieraufwand muß natürlich gerechtfertigt sein und man braucht einen Datensatz.
* 22MB war der Spitzenreiter, was die Masse angeht
