8 Perpustakaan JavaScript untuk menghidupkan SVG
SVG adalah grafik resolusi-independen. Itu artinya akan terlihat bagus di semua jenis layar tanpa kehilangan kualitas. Selain itu, Anda juga dapat membuat SVG menjadi hidup dengan beberapa efek animasi.
Di salah satu pos seri SVG kami sebelumnya, kami telah menunjukkan kepada Anda bagaimana animasi SVG bekerja dengan
Lebih banyak tentang Hongkiat.com:
- Animate.css - Perpustakaan CSS3 untuk membuat animasi dengan mudah
- Mudah menghidupkan teks dengan Textillate.js
- Bagaimana cara mengubah teks Photoshop menjadi SVG
- Aktif untuk menyembunyikan dan menggeser konten dengan jQuery
1. Vivus
Vivus adalah perpustakaan JavaScript itu memberikan SVG Anda penampilan sedang digambar. Vivus bekerja di luar kotak tanpa memerlukan ketergantungan apa pun (mis. JQuery). Cukup sertakan .js file dalam HTML Anda, dan tentukan elemen SVG yang ingin Anda menghidupkan, bersama dengan beberapa opsi yang telah ditetapkan untuk memulai animasi segera.
Sebagai contoh:
Vivus baru ('svg-element', type: 'oneByOne', durasi: 200); Di atas akan menghidupkan elemen SVG saya yang memiliki svg-element ID dalam 200 milidetik. Setiap elemen SVG ini akan digambar satu demi satu dalam jangka waktu tersebut.
2. Bonsai
Bonsai adalah pustaka JavaScript yang tangguh yang memungkinkan Anda menggambar, mengubah, serta menghidupkan elemen grafis di halaman web. Ini mendukung kedua jenis grafik HTML5 Kanvas dan SVG. Dengan Bonsai, Anda dapat membuat persegi panjang atau lingkaran sederhana atau jika Anda suka, a multipemain penuh game animasi seperti ini. Anda dapat menggunakan Orbit untuk merasakan bagaimana Bonsai bekerja dalam aksi langsung atau lihat beberapa contoh mengesankan ini untuk menarik inspirasi.
3. Kecepatan
Velocity adalah pustaka JavaScript yang dibuat untuk animasi cepat. Kecepatan Velocity ketika merender animasi sangat cepat. Ini mengungguli jQuery, dan bahkan CSS, sebagai perbandingan. API Velocity bekerja mirip dengan animasi di jQuery kecuali menggunakan alias kata kunci $ .velocity () dari pada $ .animate (). Selain itu, Anda dapat menggunakan kata kunci animasi yang sama persis seperti fadeIn dan fadeOut.
4. Raphael
RaphaelJS adalah perpustakaan yang memungkinkan Anda untuk menggambar serta menghidupkan vektor grafik SVG di halaman web. Ini mendukung berbagai browser sampai ke IE6, yang cukup banyak menjadikan Raphael perpustakaan JavaScript paling dapat diandalkan di ceruk. Dengan RaphaelJS, Anda dapat membuat bagan analitik interaktif, peta dunia, dan interaksi game seperti Counter Strike.
5. Jepret
SnapSVG adalah perpustakaan JavaScript populer lainnya untuk animasi SVG yang dikembangkan oleh pengembang Raphael, Dmitry Baranovskiy, bersama dengan Tim Platform Web Adobe dari bawah ke atas. Tidak seperti Raphael, SnapSVG hanya ditujukan untuk browser terbaru. Itu memungkinkan pustaka untuk secara signifikan lebih kecil dari Raphael dan untuk mendukung fitur SVG seperti kliping dan masking.
6. Lazy Line Painter
Lazy Line Painter adalah plugin jQuery untuk menghidupkan jalur SVG untuk menghidupkan urutan gambar, mirip dengan Vivus. Berita buruknya adalah plugin ini hanya melakukan hal yang sangat spesifik ini. Karenanya, ketika Anda mengimpor SVG dari aplikasi seperti Illustrator atau Inkscape, pastikan tidak ada warna Fill yang tersisa di SVG Anda, hanya jalurnya.
7. SVG.js
SVG.js adalah pustaka ringan untuk memanipulasi dan menghidupkan SVG. Dengan perpustakaan ini, Anda dapat menganimasikan ukuran, posisi, atau warna dalam elemen SVG Anda. Itu tidak hanya menjiwai; Anda juga dapat menerapkan plugin tambahan untuk menambahkan fungsionalitas tambahan. Contoh ini menggunakan plugin svg.filter.js untuk menerapkan filter seperti gaussian blur, desaturate, contrast, sepia dll ke gambar.
8. Jalan setapak
Jalan setapak mendukung tiga jenis elemen, jalan, baris, dan polyline digunakan untuk menggambar garis SVG. Berikut adalah contoh dari Polygon yang memperlihatkan animasi garis konsol PlayStation 4.
