Anime.js - Perpustakaan Animasi JavaScript Ringan

Animasi web telah datang jauh. Bukan sahaja pemaju boleh membuat sebarang animasi menggunakan kombo CSS / SVG / JS, tetapi ada berpuluh-puluh perpustakaan percuma untuk menjimatkan masa dalam proses.

Salah satu kegemaran saya ialah Anime.js, sumber terbuka yang sepenuhnya bebas Perpustakaan animasi JavaScript.

Perpustakaan ini boleh buat semuanya. Ia dibina di atas JavaScript tetapi juga sangat bergantung pada animasi CSS. Anda boleh menyasarkan unsur halaman individu melalui DOM atau anda juga boleh menargetkan SVG adat.

Semua dokumentasi adalah sendiri dihoskan pada GitHub, jadi anda mungkin perlu menatal untuk mencari apa yang anda cari. Tetapi setiap ciri animasi datang dengan beberapa parameter seperti kelewatan, tempoh, dan pelonggaran.

Perhatikan perpustakaan ini tidak datang dengan banyak gaya animasi lalai. Anime.js adalah dibuat untuk pemaju yang ingin menyesuaikan animasi mereka tanpa menulis kod verbose.

Untuk contoh hidup, semak pen Codepen di bawah. Kod ini sangat mudah tetapi anda mendapat animasi yang boleh dipercayai skuasy & regangan tambahnya jangkaan, kedua-dua asas animasi.

Amaran yang adil: perpustakaan Anime.js adalah padat. Ia bukan semua yang sukar untuk membuat animasi tersuai tetapi anda perlu memahami beberapa asas seperti pelonggaran dan sintaks JavaScript biasa untuk panggilan balik & opsyen.

Tetapi semua maklumat yang anda perlukan diatas halaman repo, termasuk banyak contoh kod dan jadual dokumentasi terperinci. Dan anda boleh melayari laporan bug terbuka atau menyemak sokongan penyemak imbas yang kini termasuk semua pelayar utama dan IE 10+.

Ini dengan mudah menjadi salah satu perpustakaan animasi yang terbaik untuk pemaju web dan harus menjadi penyelesaian untuk anda mana-mana animasi web yang kompleks.

Untuk melihat sekumpulan contoh hidup, semak koleksi ini demo Anime.js yang dihoskan pada CodePen. Di bawah, saya menanam kegemaran saya yang animasi seluruh logo dari awal, dengan kehebatan sebenar.