Конвертировать анимированные SVG в фильм

16676
Benjamin Wohlwend

У меня есть анимированный SVG и я хотел бы превратить его в фильм (серия картинок тоже подойдет). Анимация воспроизводится в браузерах webkit (Safari, Chrome) и в болтовне Батика ). Я попытался захватить его с помощью захвата экрана. но фильм заканчивается довольно вяло.

Есть ли хороший инструмент для этого?

Вот пример анимации: 

<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
Существует конвертер SVG в APNG (http://littlesvr.ca/apng/svg2png/), возможно, какой-то другой инструмент можно использовать для преобразования APNG в фильм или для разделения кадров. kartikmohta 15 лет назад 2
@kartikmohta: Добавьте это как ответ. Mechanical snail 12 лет назад 1

3 ответа на вопрос

4
Manni

Я нашел способ создать серию изображений с помощью 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
DaveParillo

Вы пытались использовать squiggle для экспорта серии кадров? Я обнаружил, что болтовня - это боль, чтобы получить вашу линию именно там, где я хотел, чтобы правильно настроить серию кадров. Однако, как только вы это сделаете, вы можете использовать imagemagick - очевидно, мой любимый ответ на этой неделе ;-), чтобы преобразовать его так, как вам нравится.

Предполагая, что каждый вы сохраняете кадры как frame01.svg, frame02.svg и т. Д. Тогда это:

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

создаст один анимированный GIF из ваших кадров, который зациклится, 5 мс между кадрами.

convert преобразует svg в, но imagemagick не обрабатывает тег animateTransform, поэтому любой вывод является статическим.

Обновление: мне было очень тяжело работать с вихрем (по крайней мере, пытаясь остановить анимацию в нужном месте, чтобы захватить изображение, я смутился, что даже предложил это!

Вот сценарий bash, использующий imagemagick для преобразования вашего svg в анимированный gif: перед запуском этого сценария я разделил ваш пример svg на 2 части: bg.svg содержит elipse и элемент 'pit', а hand.svg содержит только 'sec' элемент

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

~
Я уверен, что кто-то более умный, чем я, мог бы понять, как объединить конвертирование и объединить все за один шаг, не поворачивая bg.png, но это то, что вы получаете бесплатно ;-)

Кроме того, хотел сохранить это простым, на случай, если его нужно переопределить как файл Windows Bat.

I = i + 5 - это компромисс между тем, насколько гладкой выглядит анимация, и размером файла.

Примечание: даже с -delay 1 (1 мс между кадрами) Firefox не будет перемещать руку по кругу за 5 секунд. Это было ближе к 10 секундам.

И вот что произвел сценарий

2
IOOI

If you're using FireFox you might give SVG Render Plug in a try: http://adasek.cz/svgrender/

Это хорошее предложение. Но я не могу понять, как заставить захват начинаться и заканчиваться, когда начинается и заканчивается настоящая анимация. posfan12 8 лет назад 0

Похожие вопросы