Pustaka animasi JavaScript sumber bebas dan terbuka teratas

Apabila digunakan dengan betul, animasi boleh meningkatkan pengalaman pengguna dengan ketara. Terdapat banyak elemen pada halaman web yang boleh dianimasikan untuk menjadikannya hidup. Perkara asas seperti warna latar belakang butang atau jejari sempadan elemen tertentu pada halaman web juga boleh dianimasikan menggunakan CSS.

Walau bagaimanapun, CSS mempunyai hadnya dan jika anda mahukan lebih kawalan ke atas setiap aspek elemen animasi anda, anda perlu menggunakan JavaScript. Dalam artikel ini, saya akan menunjukkan kepada anda lapan perpustakaan animasi JavaScript sumber terbuka dan percuma terbaik yang boleh anda gunakan dalam projek anda sekarang.

Mo.js

Mo.js ialah perpustakaan yang sangat baik untuk menambahkan grafik gerakan berasaskan JavaScript ke tapak web anda. Ia sangat pantas, menghasilkan animasi yang lancar dan kelihatan hebat pada pelbagai peranti. Ia juga modular, jadi anda mengelakkan overhed tambahan jika anda hanya mahu menggunakan komponen tertentu.

Pustaka mempunyai API pengisytiharan untuk menetapkan nilai sifat berbeza untuk komponen yang anda buat. Ia datang dengan empat modul terbina dalam berbeza yang dipanggil Html, Shape, ShapeSwirl dan Burst. Ledakan dan pusingan boleh digunakan secara kreatif dalam pelbagai interaksi pengguna dengan elemen di tapak web anda.

Cuba klik di mana-mana sahaja dalam CodePen di atas dan anda akan melihat sekumpulan bulatan dan bintang yang menarik. Ia dicipta oleh LegoMushroom menggunakan modul Burst and Shape dalam mo.js.

mo.js menyediakan banyak contoh menarik seperti ini untuk membantu anda memahami pelbagai aspek perpustakaan.

anime

Anime ialah salah satu perpustakaan animasi paling popular di GitHub. Ia sangat ringan dan dilengkapi dengan API yang mudah dipelajari. Pustaka ini boleh digunakan untuk menganimasikan sifat CSS, sifat SVG dan DOM.

Ia memberi anda banyak kawalan ke atas cara elemen bernyawa. Anda boleh mengawal kelajuan, arah dan susunan objek bergerak. Setiap kali anda memilih untuk melakukan ini, anda boleh memilih untuk menjeda, memulakan semula atau membalikkan animasi.

Perpustakaan juga menyediakan sokongan yang baik untuk animasi SVG. Anda boleh mencipta kesan transformasi yang lancar atau mencipta animasi lukisan garisan antara dua bentuk SVG yang berbeza.

Cuba klik butang Tulis Nama dalam CodePen di atas dan anda akan melihat huruf nama saya bernyawa satu demi satu. Demo ini adalah sebahagian daripada siri tutorial tentang anime. Anda boleh menyemaknya untuk mengetahui lebih lanjut tentang perpustakaan.

Tindakan Popular

Popmotion ialah satu lagi perpustakaan animasi yang ringan dan popular. Anda boleh menggunakannya untuk menghidupkan nombor, warna dan rentetan kompleks. Fungsi animasi utama dalam perpustakaan adalah kira-kira 5kb, dan keseluruhan perpustakaan adalah kira-kira 12kb.

Anda boleh menggunakannya untuk mencipta dua jenis animasi: bingkai utama dan musim bunga. Anda boleh menyediakan titik mula dan tamat, dsb. untuk animasi bingkai utama. Animasi musim bunga mempunyai sifat seperti kekakuan, redaman, jisim dan kelajuan, memberikan animasi anda gerakan yang lebih semula jadi. Perpustakaan ini juga dilengkapi dengan banyak fungsi utiliti untuk pengiraan seperti angle、clamp、distance、snapp dll.

Animasi bingkai utama dalam tunjuk cara CodePen gaougalos di atas telah dibuat menggunakan perpustakaan Popmotion.

paparan tatal

Pustaka ScrollReveal berguna apabila anda ingin menghidupkan elemen semasa ia menatal masuk atau keluar dari port pandangan.

Terdapat banyak pilihan untuk elemen animasi. Anda boleh menggunakan sifat kelewatan, tempoh dan selang waktu untuk mengawal kemajuan animasi. Terdapat juga pilihan untuk mengawal putaran, penskalaan dan pergerakan objek yang akan dipaparkan. Pustaka juga dilengkapi dengan panggilan balik yang boleh digunakan untuk menentukan perkara yang berlaku sebelum atau selepas elemen dipaparkan.

Demo CodePen di atas Sava Lazic menggunakan perpustakaan ScrollReveal untuk mencipta garis masa menegak yang menarik secara visual. Anda boleh membuat kandungan yang serupa dengan mempamerkan produk atau projek di tapak web anda.

hidup

Vivus ialah perpustakaan animasi berasaskan JavaScript yang menakjubkan yang dicipta khusus untuk membuat animasi SVG. Ia sangat ringan dan tidak mempunyai kebergantungan.

Vivus memberi anda tiga cara berbeza untuk menghidupkan laluan dalam SVG. Anda boleh menghidupkan semua baris serentak, dengan kelewatan, atau satu demi satu. Ia juga memberi anda banyak fleksibiliti semasa mengatur masa animasi anda.

Sesetengah perkara yang anda harus ingat apabila menggunakan Vivus ialah ia sentiasa menghidupkan elemen dalam susunan yang ditakrifkan dalam SVG. Selain itu, elemen yang anda ingin hidupkan harus mempunyai strok dan bukannya isian.

Animasi laluan SVG dalam demo CodePen Alex Nelson di atas telah dibuat dengan hanya enam baris kod dan sedikit bantuan daripada Vivus.

Dip.js

Anda boleh meneka dari nama Typed.js bahawa perpustakaan animasi ini digunakan untuk memasukkan teks. Anda boleh lulus semua rentetan yang anda mahu masukkan sebagai tatasusunan. Pustaka ini juga melaksanakan cara yang lebih mesra SEO untuk membaca teks yang anda ingin animasikan dengan menaip daripada HTML div pada halaman web.

Anda boleh memperhalusi gelagat animasi menaip dengan bantuan satu siri parameter. Ini termasuk kelajuan menaip, kelajuan ruang belakang, kelewatan mula, kelewatan ruang belakang, kiraan gelung dan banyak lagi. Anda juga boleh menentukan sekumpulan fungsi panggil balik yang menyala pada acara yang berbeza (seperti selepas menaip rentetan).

Conner's CodePen di atas menggambarkan cara kami boleh menggunakan perpustakaan ini untuk menjadikan halaman ralat 404 yang membosankan menarik.

ProgressBar.js

Adalah idea yang baik untuk menambah bar kemajuan pada sebarang proses yang mengambil sedikit masa untuk diselesaikan. Ini membolehkan pengguna mengetahui betapa cepatnya tugas itu berjalan. Sebagai contoh, anda boleh memaparkan bar kemajuan dalam editor imej dalam talian untuk memberitahu pengguna bahawa halaman itu bukan sahaja tersekat, tetapi imej itu sebenarnya sedang diproses di latar belakang.

Pustaka ProgressBar.js memudahkan pembangun menambahkan bar kemajuan yang bergaya pada tapak web mereka. Selain membuat bar kemajuan menggunakan beberapa bentuk terbina dalam, seperti garisan, bulatan atau separuh bulatan, anda juga boleh memilih untuk menggunakan bentuk tersuai anda sendiri. Ini membuka pelbagai kemungkinan menarik.

Seperti yang anda lihat dalam demo di atas, kami boleh menghidupkan pelbagai sifat dalam bar kemajuan. Anda boleh menyemak tutorial pengenalan ProgressBar.js ini untuk mengetahui lebih lanjut tentang perpustakaan.

Lotti

Lotie untuk Airbnb ialah perpustakaan animasi yang berbeza daripada perpustakaan animasi lain yang telah kami bincangkan setakat ini. Ia menghuraikan animasi yang dibuat dengan Adobe After Effects yang telah dieksport ke JSON menggunakan Bodymovin. Anda kemudiannya boleh memaparkan kesan ini terus pada halaman web.

Halaman GitHub perpustakaan menerangkan proses pemasangan dan cara ia berfungsi secara terperinci. Terdapat banyak kaedah global yang boleh anda gunakan untuk mengawal kemajuan animasi. Anda boleh memulakan, menghentikan dan membalikkan arah animasi dengan mudah.

Anda hanya perlu menulis beberapa baris kod untuk memuatkan fail JSON yang diperlukan dan memulakan animasi dengan beberapa parameter. Demo CodePen daripada kittons di atas ialah contoh yang bagus tentang cara membuat animasi After Effects dalam penyemak imbas dengan mudah.

Fikiran Akhir

Dalam artikel ini, kami melihat lapan perpustakaan animasi JavaScript percuma dan sumber terbuka yang popular. Mereka masing-masing melakukan sesuatu yang berbeza dan menyasarkan aspek animasi web yang berbeza. Dengan perpustakaan ini, anda akan dapat menghidupkan hampir semua kandungan di tapak web anda. Saya harap anda menggunakan perpustakaan ini untuk mencipta laman web yang cantik yang membezakan anda daripada persaingan! Pastikan anda tidak terlalu menggunakan animasi.

Satu perkara yang perlu diingat ialah anda masih harus mencuba menggunakan CSS untuk animasi mudah. Tidak ada gunanya memuatkan pustaka animasi JavaScript penuh jika anda hanya mahu menukar warna elemen apabila pengguna menuding di atasnya.

Atas ialah kandungan terperinci Pustaka animasi JavaScript sumber bebas dan terbuka teratas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!