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

У меня есть анимированный 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>
Источник

3 ответа

Решение

Вы пытались использовать 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${n}.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 секундам.

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

Источник

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

Если вы используете FireFox, вы можете попробовать SVG Render Plug: http://adasek.cz/svgrender/

Источник

Существует пакет узлов под названием timecutкоторый использует Chromium для записи SVG в видеофайл MP4. https://github.com/tungs/timecut

Установка

$ cd project
$ npm install timecut

Применение

$ cd project
$ ./node_modules/timecut/cli.js Animation.svg

Это создает файл с именем video.mp4.

timecut имеет множество опций, таких как частота кадров, формат пикселей и т. д.

Источник

Для рендеринга анимированного svg в анимированный gif

Источник
Другие вопросы по тегам