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>
Jawaban:
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:
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
~
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
sumber
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:
untuk:
Sejalan 2361 dan 2390 berubah dari:
untuk:
Skrip generasi saya:
sumber
Jika Anda menggunakan FireFox, Anda dapat mencoba SVG Render Plug in try: http://adasek.cz/svgrender/
sumber