Anime.js - Perpustakaan Animasi JavaScript Ringan

Animasi web telah datang jauh. Pengembang tidak hanya dapat membuat animasi apa pun menggunakan kombo CSS / SVG / JS, tetapi ada juga puluhan perpustakaan gratis untuk menghemat waktu dalam proses.

Salah satu favorit saya adalah Anime.js, sumber terbuka sepenuhnya gratis Perpustakaan animasi JavaScript.

Perpustakaan ini bisa lakukan semuanya. Nya dibangun di atas JavaScript tetapi juga sangat bergantung pada animasi CSS. Anda dapat menargetkan elemen halaman individual melalui DOM atau Anda bahkan dapat menargetkan SVG khusus.

Semua dokumentasinya di-hosting sendiri di GitHub, jadi Anda mungkin perlu menggulir untuk menemukan apa yang Anda cari. Tetapi setiap fitur animasi dilengkapi dengan beberapa parameter seperti penundaan, durasi, dan pelonggaran.

Perhatikan perpustakaan ini tidak datang dengan banyak gaya animasi default. Anime.js adalah dibuat untuk pengembang yang ingin menyesuaikan animasi mereka tanpa menulis kode verbose.

Untuk sebuah contoh hidup, lihat pena Codepen di bawah ini. Kodenya adalah sangat sederhana tetapi Anda mendapatkan animasi yang bisa dipercaya squash & stretch plus antisipasi, keduanya merupakan dasar dari animasi.

Peringatan yang adil: perpustakaan Anime.js adalah padat. Tidak terlalu sulit untuk membuat animasi khusus tetapi Anda harus melakukannya memahami beberapa dasar seperti pelonggaran dan sintaksis JavaScript umum untuk callback & opsi.

Tapi semua informasi yang Anda butuhkan ada di halaman repo, termasuk banyak contoh kode dan tabel dokumentasi terperinci. Dan Anda dapat menelusuri laporan bug terbuka atau memeriksa dukungan browser yang saat ini termasuk semua browser utama dan IE 10+.

Ini adalah salah satu pustaka animasi terbaik untuk pengembang web dan harus menjadi solusi masuk Anda animasi web yang rumit.

Untuk melihat banyak contoh hidup, lihat koleksi demo Anime.js yang dihosting di CodePen. Di bawah, saya menyematkan favorit saya yang mana menjiwai seluruh logo dari awal, dengan kelincahan nyata.