Disyorkan 10 perpustakaan JavaScript untuk kemahiran animation_javascript SVG

SVG selalunya boleh digunakan sebagai video peleraian silang. Ini bermakna tiada kehilangan ketajaman imej pada skrin resolusi tinggi. Selain itu, anda juga boleh menghidupkan SVG menggunakan beberapa perpustakaan JavaScript. Di bawah, kami berkongsi beberapa perpustakaan javascript yang akan membantu kami membawa animasi SVG ke peringkat seterusnya.

Vivus

Vivus ialah perpustakaan js animasi yang boleh memaparkan proses lukisan imej SVG. Vivus tidak mempunyai kebergantungan pada perpustakaan lain (seperti jQuery). Anda hanya perlu menambah fail .js ini pada halaman, dan kemudian masukkan bahagian SVG yang perlu digunakan untuk animasi. Pada masa yang sama, dengan menentukan beberapa konfigurasi, ia boleh memaparkan kesan animasi terus selepas halaman dimuatkan.

Bonsai

Bonsai ialah perpustakaan JS yang kaya dengan ciri yang boleh anda gunakan untuk melukis dan menganimasikan kandungan dinamik pada tapak web anda. Ini termasuk video HTML5, varian Canvas dan SVG. Dengan rangka kerja Bonsai, anda boleh melukis segi empat tepat, atau bahagian segi empat tepat, atau malah permainan kartun berbilang pemain yang kaya ke dalamnya jika anda suka.

Kelajuan

Velocity ialah perpustakaan kelas JS, yang digunakan untuk animasi yang kerap. "kelajuan" animasi js Velocity sangat pantas. Ia lebih pantas daripada JQuery dan lebih pantas daripada animasi CSS. API Velocity sangat serupa dengan $.fn.animate, kedua-duanya dikendalikan melalui $(). velocity() ialah kaedah lain berbanding $().animate(). Secara ringkasnya, anda harus menggunakan kesan animasi yang konsisten, termasuk kaedah fadeIn dan fadeOut (Penterjemah: Velocity menyediakan kaedah fadeIn dan fadeOut).

Raphael

RaphaelJS juga biasa digunakan untuk melukis imej dan animasi SVG pada halaman web. Ia serasi dengan pelbagai pelayar Windows sehingga IE6 Kerana ini, Raphael telah menjadi perpustakaan js (svg) yang paling dipercayai di pasaran. Dengan itu, anda boleh membuat carta analisis, peta, permainan seperti memasak di dapur.

Snap

SnapSVG ialah satu lagi perpustakaan JS terkenal yang dibangunkan oleh Dmitry Baranovskiy (seperti yang dilakukan Raphael). Ia juga diselenggara oleh Adobe Web Software Group. Tidak seperti Raphael, ia hanya menyediakan sokongan untuk versi terkini IE. Ini menjadikan SnapSVG jauh lebih kecil (berbanding dengan Raphel) untuk mencapai fungsi yang sama (seperti trim) dan menyokong ciri terkini.

Pelukis Garisan Malas

Laid Back Range Painter ialah pemalam jQuery, biasanya digunakan untuk melukis atlas, sedikit seperti Vivus. Biasanya apa yang anda adukan ialah ia hanya mempunyai satu fungsi khas. Biar saya jelaskan, jika anda menggunakan Illustrator atau Inkscape untuk mencipta imej SVG, dan imej SVG tidak mempunyai sebarang perubahan warna, hanya perubahan dalam trajektori, anda boleh menggunakan ini.

SVG.js

SVG.js ialah perpustakaan SVG yang ringan untuk manipulasi dan animasi. Anda boleh memanipulasi perubahan arah, kedudukan dan warna. Ini belum berakhir, malah anda boleh melaksanakan fungsi lain seperti plug-in sendiri. Contoh ini boleh melampirkan beberapa pemalam, seperti svg.filter.js, yang boleh melaksanakan Gaussian blur, desaturase, compare, sepia dan fungsi lain untuk imej anda.

Jalan pejalan kaki

Jalan pejalan kaki menyokong 3 kaedah, laluan, garisan dan garisan svg yang dilukis dengan polyline. Ia memberikan contoh yang baik untuk melukis animasi koleksi PlayStation.

Progressbar.js

ProgressBar.js ialah carta lengkung pertumbuhan yang comel dan mudah diterima untuk melukis garisan SVG kartun. Dengan itu, pelbagai bentuk boleh digunakan sebagai lengkung pertumbuhan. Ia menyepadukan beberapa bentuk praktikal seperti Julat, Bulatan dan Blok, malah anda boleh membangunkan carta pertumbuhan anda sendiri melalui Illustrator atau alat lukisan vektor lain. ProgressBar.js ringan, berlesen MIT dan menyokong IE9. Ia membolehkan anda mengubah suai carta pertumbuhan kolumnar yang besar. Anda juga boleh menukar sifat untuk menjana animasi, seperti keluasan lejang, kelegapan beban, pewarnaan muatan, dsb.

Chartlist.js

Chartist.js ialah pustaka ikon yang ringkas dan mudah diterima, yang dilukis melalui SVG. Tujuan Chartist adalah untuk menyediakan perpustakaan carta yang ringkas, ringan dan tidak mengganggu. Anda perlu menyediakan beberapa objek konfigurasi javascript untuk melakukan beberapa konfigurasi tersuai, jika tidak, ia akan menggunakan konfigurasi lalai, yang telah diisih secara lalai.

Chartist dilukis melalui inline-SVG, jadi ia mempunyai sedikit kesan pada manipulasi DOM, berbanding dengan fungsi yang disediakannya. Dan ini bermakna bahawa Chartist tidak menyediakan kawalan peribadi, tera air, gelagat, dsb. yang boleh anda capai melalui HTML, JavaScript dan CSS yang mudah.

Di atas ialah perpustakaan javascript untuk animasi SVG yang disyorkan dalam artikel ini. Saya harap ia akan membantu semua orang untuk mempelajari javascript.