Ubah animasi SVG menjadi film

21

Saya memiliki SVG animasi dan ingin mengubahnya menjadi film (serangkaian gambar juga akan melakukannya). Animasi diputar di browser webkit (Safari, Chrome) dan coretan Batik ). Saya mencoba memotretnya dengan tangkapan layar. tapi filmnya berakhir tersentak-sentak.

Apakah ada alat yang bagus untuk ini?

Berikut ini contoh animasi:

<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

— Benjamin Wohlwend
sumber

2

Ada konverter SVG ke APNG ( littlesvr.ca/apng/svg2png ), mungkin beberapa alat lain dapat digunakan untuk mengkonversi dari APNG ke film atau memisahkan frame.

— kartikmohta

1

@kartikmohta: Tambahkan itu sebagai jawaban.

— Siput mekanik

4

Sudahkah Anda mencoba menggunakan coretan untuk mengekspor serangkaian bingkai? Saya menemukan kesulitan untuk mendapatkan garis Anda tepat di tempat yang saya inginkan untuk memasang serangkaian bingkai dengan benar. Namun, begitu Anda memilikinya, Anda dapat menggunakan imagemagick - tampaknya jawaban favorit saya minggu ini ;-) untuk mengubahnya sesuka Anda.

Dengan asumsi masing-masing Anda menyimpan frame sebagai frame01.svg, frame02.svg, dll. Maka ini:

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

akan membuat gif animasi tunggal dari frame Anda yang loop selamanya, 5 ms antara frame.

convert akan mengonversi svg ke, tetapi imagemagick tidak memproses tag animateTransform, sehingga output apa pun adalah statis.

Update: Saya merasa kesulitan untuk bekerja (setidaknya mencoba menghentikan animasi di tempat yang tepat untuk mengambil gambar, saya malu bahkan menyarankannya!)

Berikut ini skrip bash menggunakan imagemagick untuk mengubah svg Anda menjadi animasi gif: Sebelum menjalankan skrip ini, saya membagi contoh svg Anda menjadi 2 bagian: bg.svg berisi elipse dan elemen serta tangan 'pit '. elemen

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

~
Saya yakin seseorang yang lebih pintar daripada saya bisa mengetahui cara menggabungkan orang yang bertobat dan menggabungkan semua dalam satu langkah tanpa juga memutar bg.png, tetapi ini adalah apa yang Anda dapatkan secara gratis ;-)

Juga, ingin tetap sederhana ini, kalau-kalau perlu diimplementasikan kembali sebagai file windows bat.

I = i + 5 adalah trade-off antara seberapa halus animasi terlihat vs ukuran file.

Catatan: Bahkan dengan -delay 1 (1 ms antara frame), firefox tidak akan menggerakkan tangan dalam lingkaran penuh dalam 5 detik. Itu mendekati 10 detik.

Dan inilah yang dihasilkan skrip

— DaveParillo
sumber

4

Saya menemukan cara untuk membuat rangkaian gambar dengan bantuan canvg . Untuk menjalankan halaman berikut, Anda harus menggunakan skrip canvg.js yang dimodifikasi agar fungsi draw dapat diakses.

Perubahan pada skrip canvg.js (v1.0):

Sejalan 2321 berubah dari:

var draw = function() {

untuk:

svg.draw = function() {

Sejalan 2361 dan 2390 berubah dari:

draw();

untuk:

svg.draw();

Skrip generasi saya:

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

— Manni
sumber

3

Jika Anda menggunakan FireFox, Anda dapat mencoba SVG Render Plug in try: http://adasek.cz/svgrender/

— IOOI
sumber

Ini saran yang bagus. Tapi saya tidak tahu bagaimana cara mendapatkan tangkapan untuk memulai dan mengakhiri ketika animasi yang sebenarnya dimulai dan berakhir.

— posfan12