Berikut ini adalah cara yang mungkin untuk menghidupkan svg:
ANIMASI SMIL SVG
SVG dapat dianimasikan melalui bahasa markup asli yang kuat, yang disebut SMIL, yang diekspor langsung dari alat animasi seperti plugin Adobe Animate CC + flash2svg.
Untuk menghidupkan SVG dengan SMIL bahkan pada browser yang tidak memiliki dukungan, Anda hanya perlu menggunakan polyfill SMIL.
Polyfill adalah potongan kode javascript khusus yang menyediakan dukungan untuk fitur-fitur yang hilang dari peramban, menerjemahkan penyandian asli ke kode yang dapat dipahami peramban.
Polyfill SMIL yang dibuat oleh Eric Willigers tidak hanya itu: ia menerjemahkan SMIL ke Web Animations API yang bahkan didukung oleh browser Microsoft. Sangat efisien sehingga pengembang Google Chrome memutuskan untuk menghentikan dukungan SMIL asli dan fokus pada Animasi Web, menyerahkan tugas polyfill kepada Eric Willigers untuk memutar file SMIL di Chrome.
Seseorang salah menafsirkan ini sebagai penghentian SMIL oleh Chrome, dan mengkritik para devs untuk pilihan ini. Tapi itu bukan penghinaan sejati, hanya relokasi pekerjaan menafsirkan SMIL pada tingkat polyfill.
Bahkan Chrome devs sendiri mengutip polyfill Willigers di sangat resmi mengumumkan tentang niat mereka untuk mencela SMIL.
Jadi, jika Anda membaca di web tentang kematian SMIL, jangan khawatir. “Kematian” SMIL sangat dibesar-besarkan. Ini lebih seperti kelahiran kembali.
Untuk menggunakan SMIL di semua browser, termasuk IE dan EDGE, Anda hanya perlu menambahkan polyfill javascript ini ke halaman web Anda:
https://github.com/ericwilligers/svg-animation
Berikut ini adalah halaman demo menggunakan polyfill yang dibuat oleh Tom Byrne, penulis eksportir flash2svg yang populer:
halaman tanpa polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm
dan halaman yang sama dengan polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm
Jika Anda melihat sumbernya cukup jelas.
Juga kinerja dengan polyfill seringkali lebih baik daripada SMIL asli, karena pada banyak browser Web Animasi dipercepat perangkat keras, sedangkan SMIL biasanya tidak.
ANIMASI EKSPOR DI SVG SMIL
Cara yang lebih sederhana untuk membuat animasi SVG adalah dengan menggunakan alat-alat seperti Adobe Animate CC untuk menggambar mereka dan plugin seperti Flash2svg ( https://github.com/TomByrne/Flash2Svg ) untuk mengekspornya dalam SVG. Dengannya Anda dapat mengekspor hampir semua animasi + suara sebagai file SVG tunggal, seperti episode kartun ini:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg
ANIMASI PERPUSTAKAAN JS
Cara javascript lebih rumit. Pertama-tama Anda harus menjadi programmer javascript. Maka Anda harus memilih di antara banyak perpustakaan. Yang lebih populer adalah:
SnapSVG
http://snapsvg.io
Perpustakaan ini adalah penerus dari perpustakaan animasi Raphael lama dan populer yang dibuat oleh penulis yang sama. Sangat stabil, tetapi mengkonversi SVG dalam format internal saat runtime untuk menghidupkannya. Opsi morphing juga sangat mendasar, hanya interpolasi linier. (CATATAN: Ada juga plugin snap.svg untuk Adobe Animate CC, tetapi file yang diekspor membengkak. Eksportir menghasilkan satu perintah snap svg untuk setiap frame animasi, tidak setiap frame kunci, menghasilkan file svg 18Kb dengan lebih dari 1000 baris kode, hanya untuk memutar persegi panjang sederhana melalui 360 derajat. Plugin Flash2svg jauh lebih efisien, hanya satu perintah dan beberapa byte untuk melakukan pekerjaan yang sama).
Greensock MorphSVG
http://greensock.com/morphSVG
Perpustakaan morphing berfitur lengkap yang memungkinkan untuk menghidupkan SVG dengan mudah, dan tanpa perlu mengubahnya dalam format internal. Cukup buat 3-4 svg keyframe di Inkscape dan Greenock SVGMorphing lib akan secara otomatis menginterpolasi antara frame dan membuat semua frame di antara untuk pemutaran yang lancar. Berikut ini sebuah contoh:
http://codepen.io/Emasoft/pen/reOqYE
3D Seen.js
http://seenjs.io/demo-svg-canvas.html
Jika Anda ingin menghidupkan 3D, perpustakaan ini sangat kuat.
Seen.js merender file .obj 3D dalam SVG dan menganimasinya dengan sangat mudah.
EDITOR GAMBAR SVG
Adapun alat-alatnya, Anda dapat membuat kerangka tombol animasi terutama dengan tiga perangkat lunak:
Inkscape: open source, memiliki banyak fitur, ini adalah paket pengeditan vektor canggih yang dibuat oleh orang-orang yang berpartisipasi dalam Kelompok Kerja SVG. Referensi untuk format SVG. Tidak mudah dipelajari.
Adobe Illustrator: komersial, perangkat lunak menggambar vektor yang sangat kuat, ia menawarkan banyak fitur yang masih belum didukung oleh SVG, tetapi juga memiliki kompatibilitas terburuk dengan format. Anda akan sering perlu mengedit file SVG yang diekspor secara manual untuk memperbaiki kekacauan ilustrator. Tapi ini sangat populer di sekolah seni, dan semua ahli grafiti tahu cara menggunakannya.
Affinity Designer: Ini adalah perangkat lunak komersial seperti Illustrator, tetapi dengan kompatibilitas SVG yang sangat baik, hampir di tingkat Inkscape. UI jauh lebih ramah, dan sekarang menjadi sangat populer di kalangan seniman SVG.
EDITOR ANIMASI SVG
Saat ini satu-satunya editor animasi SVG adalah ini:
- Adobe Animate CC: mantan Adobe Flash Pro sepenuhnya ditulis ulang oleh Adobe untuk bermigrasi dari animasi flash yang sekarang usang ke animasi SVG modern. Anda dapat mengekspor animasi SVG yang dihasilkan bersama dengan pustaka javascript kustom, atau memilih untuk menyimpan di SVG + SMIL menggunakan plugin seperti "flash2svg". Opsi terakhir ini sangat efisien, saya selalu menggunakannya sebagai pengganti eksportir asli yang menggembung.
Anda dapat mengunduh plugin gratis dari sini:
https://github.com/TomByrne/Flash2Svg
Atau instal dari panel Adobe Plugins:
https://creative.adobe.com/addons/products/7232
Sayangnya, Adobe Animate CC bersifat komersial. Ada aplikasi animasi alternatif open source gratis, tapi saya mencoba semuanya dan mereka masih menyedot IMHO. Mari berharap untuk masa depan.
Referensi:
Posting blog saya yang lebih lengkap mengenai masalah ini: https://medium.com/@fmuaddib/the-following-are-the-pos-ways-to-create-professional-animations-in-svg-9d4caca5f4ec
Kasing direferensikan tentang snap.svg:
/programming/35727635/adobe-animate-snap-svg-plugin-huge-files