Перетворити анімаційний SVG у фільм

21

У мене є анімований 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>

animation svg

— Бенджамін Вольвенд
джерело

2

Існує перетворювач SVG в APNG ( littlesvr.ca/apng/svg2png ), ймовірно, якийсь інший інструмент може бути використаний для перетворення з APNG у фільм або розділення кадрів.

— kartikmohta

1

@kartikmohta: додайте це як відповідь.

— Механічний равлик

4

Ви спробували використовувати 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 містить еліпс та елемент '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, але це те, що ви отримуєте безкоштовно ;-)

Крім того, хотів зберегти це просто, про всяк випадок, якщо його потрібно буде повторно застосувати у вигляді файлу bat bat.

I = i + 5 - це компроміс між рівнем виду анімації та розміром файлу.

Примітка: Навіть при -delay 1 (1 мс між кадрами), firefox не перемістив би руку в повному колі за 5 секунд. Це було ближче до 10 сек.

І ось що створив сценарій

— DaveParillo
джерело

4

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

Якщо ви використовуєте FireFox, ви можете спробувати SVG Render Plug: http://adasek.cz/svgrender/

— IOOI
джерело

Це гарна пропозиція. Але я не можу зрозуміти, як зйомки почати і закінчити, коли реальна анімація починається і закінчується.

— posfan12