JavaScript adalah cara terakhir yang akan kita bahas dalam menganimasikan SVG. Kami melihat CSS, yang bagus dan cukup nyaman, tetapi tidak dapat melakukan sejumlah properti SVG yang mungkin ingin Anda animasikan. Kemudian kami melihat SMIL, yang merupakan sintaks deklaratif tepat di kode SVG itu sendiri, yang lebih kuat karena dapat menganimasikan lebih banyak hal termasuk bentuk elemen itu sendiri.
JavaScript dapat melakukan semua hal yang dapat dilakukan salah satu dari itu, dan melakukannya dengan baik. Itu hanya datang dengan biaya baik menulis kode yang sangat rumit sendiri, atau biaya tambahan dari perpustakaan untuk membantu Anda. Tapi begitu Anda aktif dan berjalan, sintaksnya bisa sangat bagus dan bersahabat dengan animasi dan kinerjanya sebenarnya bisa menjadi yang terbaik.
Keuntungan lain menggunakan JavaScript untuk animasi SVG adalah dukungan. Ada banyak kebiasaan yang perlu diperhatikan saat menganimasikan SVG. Beberapa browser tidak mendukung transformasi pada elemen. Beberapa browser melakukan hal-hal aneh dengan pembesaran halaman. Beberapa tidak konsisten dengan asal-transformasi. Perpustakaan JavaScript sering kali membantu mengatasi masalah ini.
Sementara kita berbicara tentang animasi secara khusus, banyak pustaka SVG JavaScript yang bekerja dengan SVG secara umum. Mereka dapat membuat dan memanipulasinya, mengakses properti dari elemen, mengubahnya, dll. Seperti menambahkan API yang lebih kuat ke SVG.
Snag.svg - “jQuery untuk SVG”
Contoh dasar penggunaan Snap.svg:
Lihat Pen BhHix oleh Chris Coyier (@chriscoyier) di CodePen.
Hal lain yang kami lakukan dalam video ini dengan Snap.svg adalah mengonversi Pena animasi CSS ini ke Snap.svg, mengajari kita bahwa kita dapat menggunakan Snap.svg untuk bekerja dengan SVG inline yang sudah ada di halaman. Adobe sendiri telah mengumpulkan sejumlah contoh.
Raphael - perpustakaan lama dari pembuat yang sama dengan Snap.svg
SVG.js - "Pustaka ringan untuk memanipulasi dan menganimasikan SVG". Inilah demo jam yang kami lihat, menunjukkan bagaimana animasi ini bekerja dengan memanipulasi DOM dengan cepat.
D3.js - “D3.js adalah pustaka JavaScript untuk memanipulasi dokumen berdasarkan data. D3 membantu Anda menghidupkan data menggunakan HTML, SVG, dan CSS. ” Berikut adalah tutorial untuk mulai membuat SVG dengannya dan pengenalan lainnya yang menganimasikannya.
GreenSock - "Animasi berkinerja sangat tinggi, tingkat profesional untuk web modern". GreenSock adalah tentang animasi di web secara umum, tetapi mendukung SVG. Ini Pena tempat Anda dapat melihat cara kerjanya.
Velocity.js - "Animasi JavaScript yang dipercepat". Juga perpustakaan tentang animasi di web secara umum, yang kebetulan mendukung SVG. Julian Shapiro membuatnya dan telah menulis tentang mengapa animasi JavaScript sebenarnya bisa menjadi gaya animasi yang paling berkinerja serta cara kerja Velocity.js. Berikut ini demo yang sangat sederhana yang menganimasikan beberapa properti khusus SVG.
Anda juga bebas melakukannya sendiri dengan animasi JavaScript tanpa bantuan kerangka kerja. Ingat SVG inline ada di DOM, jadi semua hal API DOM reguler tersedia untuk Anda. Agak seperti Anda bagaimana tidak benar-benar membutuhkan jQuery untuk bekerja dengan DOM, itu seringkali membuatnya lebih mudah. Berikut adalah contoh yang melakukan berbagai hal dengan caranya sendiri yang cukup menarik.