8 JavaScript Perpustakaan untuk Animasi SVG
SVG adalah grafik bebas resolusi. Itu bermakna ia akan kelihatan baik pada sebarang jenis skrin tanpa mengalami sebarang kehilangan kualiti. Selain itu, anda juga boleh membuat SVG menjadi hidup dengan beberapa kesan animasi.
Di salah satu jawatan siri SVG kami sebelum ini, kami telah menunjukkan kepada anda bagaimana animasi SVG berfungsi dengan
Lebih lanjut mengenai Hongkiat.com:
- Animate.css - Perpustakaan CSS3 untuk membuat animasi dengan mudah
- Mudah menghidupkan teks dengan Textillate.js
- Bagaimana untuk menukar teks Photoshop ke dalam SVG
- Berhati-hati untuk menyembunyikan dan meleret kandungan dengan jQuery
1. Vivus
Vivus adalah perpustakaan JavaScript yang memberikan SVG anda rupa ditarik. Vivus berfungsi di luar kotak tanpa memerlukan sebarang ketergantungan (mis. JQuery). Cukup sertakan .js fail dalam HTML anda, dan tentukan elemen SVG yang anda mahu bernyawa, bersama dengan beberapa pilihan pratetap untuk memulakan animasi dengan serta-merta.
Sebagai contoh:
baru Vivus ('svg-element', type: 'oneByOne', durasi: 200); Di atas akan menghidupkan elemen SVG saya yang mempunyai svg-element ID dalam 200 milisaat. Setiap elemen SVG ini akan ditarik satu demi satu dalam tempoh masa itu.
2. Bonsai
Bonsai adalah pustaka JavaScript yang kuat yang membolehkan anda melukis, morph serta menghidupkan elemen grafik di laman web. Ia menyokong kedua-dua kanvas jenis HTML5 dan SVG. Dengan Bonsai, anda boleh membina segi empat tepat atau bulatan atau jika anda suka, a berbilang pemain penuh permainan animasi seperti ini. Anda boleh menggunakan Orbit untuk merasakan bagaimana Bonsai berfungsi dalam tindakan secara langsung atau menyemak beberapa contoh yang mengagumkan untuk menarik inspirasi dari.
3. Velocity
Velocity adalah pustaka JavaScript yang dibina untuk animasi cepat. Kelajuan laju ketika animasi rendering sangat cepat. Ia lebih baik daripada jQuery, dan bahkan CSS, berbanding. API Velocity berfungsi sama seperti animasi dalam jQuery kecuali ia menggunakan alias kata kunci $ .velocity () bukannya $ .animate (). Selain itu, anda boleh menggunakan kata kunci animasi yang sama seperti fadeIn dan fadeOut.
4. Raphael
RaphaelJS adalah perpustakaan yang membolehkan anda menggambar serta menghidupkan SVG grafis vektor pada laman web. Ia menyokong pelbagai pelayar sepanjang jalan ke IE6, yang cukup banyak membuat Raphael perpustakaan JavaScript yang paling boleh dipercayai dalam niche tersebut. Dengan RaphaelJS, anda boleh membina carta analitik interaktif, peta dunia, dan interaksi permainan yang serupa dengan Strike Counter.
5. Snap
SnapSVG adalah satu lagi perpustakaan JavaScript popular untuk animasi SVG yang dibangunkan oleh pemaju Raphael, Dmitry Baranovskiy, bersama dengan Pasukan Web Adobe Platform dari bawah ke atas. Tidak seperti Raphael walaupun, SnapSVG hanya dimaksudkan untuk pelayar terkini. Itu membolehkan perpustakaan menjadi jauh lebih kecil daripada Raphael dan untuk menyokong ciri-ciri SVG seperti kliping dan masking.
6. Painter Line Lazy
Lazy Line Painter adalah plugin jQuery untuk menghidupkan laluan SVG untuk menghidupkan urutan lukisan, mirip dengan Vivus. Berita buruk ialah plugin ini hanya melakukan hal yang sangat khusus ini. Oleh itu, apabila anda mengimport SVG dari aplikasi seperti Illustrator atau Inkscape, pastikan tiada warna Isi yang tersisa di SVG anda, hanya laluan.
7. SVG.js
SVG.js adalah perpustakaan yang ringan untuk memanipulasi dan menghidupkan SVG. Dengan perpustakaan ini, anda dapat menghidupkan saiz, kedudukan atau warna dalam elemen SVG anda. Ia bukan sahaja mengasyikkan; anda juga boleh menggunakan plugin tambahan untuk menambah fungsi tambahan. Contoh ini menggunakan plugin svg.filter.js untuk memohon penapis seperti blur gauss, desaturate, kontras, sepia dll ke imej.
8. Walkway
Walkway menyokong tiga jenis elemen, jalan, talian, dan polyline digunakan untuk menarik garisan SVG. Berikut adalah contoh dari Polygon yang menunjukkan animasi garis konsol PlayStation 4.
