Web dipenuhi dengan animasi yang menakjubkan dan hipnosis. Hari ini, pembangun menggunakan pelbagai jenis teknik untuk mencipta penglibatan, menghiburkan dan memaklumkan pengguna web, dan animasi membantu kami mencapai matlamat ini.
10 tahun yang lalu, pembangun menggunakan Adobe Flash untuk menambah interaktiviti pada tapak mereka, tetapi dengan kemunculan HTML5, CSS3 dan segudang perpustakaan JavaScript, Flash telah (bersyukur) hilang daripada landskap.
Terdapat sejumlah besar perpustakaan animasi dan saya akan membentangkan 9 daripadanya kepada anda, mengikut 3 kriteria: kesederhanaan pelaksanaan, ciri yang ditawarkan dan populariti.

Animate.css

Animate.css ialah salah satu perpustakaan CSS yang paling cekap dan mudah digunakan yang tersedia. Ia mudah untuk dilaksanakan kerana ia cukup untuk menambah kelas CSS pada elemen HTML.

Pencipta: Daniel Eden
Tarikh diterbitkan: 2013
Versi Semasa: 3.4.0
Populariti: 25,000+ bintang di GitHub
Penerangan: "Pustaka animasi CSS silang pelayar. Semudah pai"
Saiz perpustakaan: 55.2 kB
GitHub: https://github.com/daneden/animate.css
Lesen: MIT

Animate.css ialah salah satu yang paling popular dan digunakan secara meluas serta cukup ringan untuk digunakan dalam tapak mudah alih. Secara peribadi, saya fikir ia adalah salah satu perpustakaan animasi terbaik dan saya mengesyorkannya untuk projek anda yang seterusnya.

Bounce.js

Bounce.js ialah alat dan pustaka Javascript yang memfokuskan pada animasi "melantun" untuk tapak web anda. Bounce.js ialah projek sumber terbuka dengan kod sumbernya di GitHub.

Pencipta: Tictail
Tarikh diterbitkan: 2014
Versi Semasa: 0.8.2
Populariti: 3,500+ bintang di GitHub
Penerangan: "Cipta animasi berkuasa CSS3 yang cantik dalam sekelip mata"
Saiz perpustakaan: 16 kB
GitHub: https://github.com/tictail/bounce.js
Lesen: MIT

Bounce.js ialah perpustakaan animasi yang baik yang merangkumi kira-kira sepuluh animasi yang dipratentukan, yang menerangkan ringannya. Seperti animate.css, animasinya lancar dan sempurna. Disyorkan jika anda tidak memerlukan pelbagai jenis animasi dan kemudahan perpustakaan adalah aset untuk projek anda.

Animasi Magic

Animasi Ajaib ialah salah satu perpustakaan yang paling mengagumkan. Terdapat banyak animasi, beberapa daripadanya benar-benar unik. Seperti Animate.css, anda boleh melaksanakan Magic dengan hanya mengimport fail CSS. Projek ini menawarkan Demo yang sangat berjaya.

Animasi Magic
Pencipta: Kristian
Tarikh diterbitkan: 2014
Versi Semasa: 1.1.0
Populariti: 3,400+ bintang di GitHub
Penerangan: "Animasi CSS3 dengan kesan khas"
Saiz perpustakaan: 36.5 kB
GitHub: https://github.com/miniMAC/magic

Saiz animasi sihir kekal munasabah berbanding Animate.css dan telah menjadi terkenal dengan beberapa kesan khas seperti kesan sihir, kesan bodoh dan kesan bom.
Jika anda sedang mencari sesuatu yang luar biasa, saya pasti mengesyorkan menyemaknya untuk projek anda yang seterusnya. Anda tidak akan kecewa.

DynCSS

DynCSS ialah jenis perpustakaan animasi yang anda mungkin ingin gunakan dalam tapak anda yang menggunakan kesan paralaks. Untuk mendapatkan idea tentang perkara yang akan membolehkan anda lakukan, lihat demo ini.

Pencipta: Vittorio Zaccaria, pengarang "Nota untuk Merekabentuk Antara Muka Aplikasi Mudah Alih yang Lebih Baik" dan "Membangunkan Permainan 3D dengan Unity 5"
Tarikh Terbitan: 2014
Versi Semasa: 0.8.1
Populariti: 190+ bintang di GitHub
Penerangan: "Hidupkan tapak anda dengan CSS Dinamik"
GitHub: https://github.com/vzaccaria/DynCSS

DynCSS ialah perpustakaan ringkas yang mungkin menjadi popular dalam masa terdekat, tetapi masih merupakan projek terbaharu seperti yang dibuktikan oleh penarafan bintang di Github. Salah satu ciri hebat ialah perpustakaan menawarkan untuk menghidupkan elemen berdasarkan penatalan, yang ditunjukkan oleh Vittorio dengan elegan pada halaman utama DynCSS (yang menggunakan paralaks dengan hebat).

CSShake

CSShake melakukan apa yang tertulis pada kotak, pustaka CSS untuk menggoncang elemen halaman web anda. Seperti yang anda jangkakan, terdapat banyak variasi untuk menggoncang semua komponen web

Pencipta: Lionel
Tarikh diterbitkan: 2014
Populariti: 2,000+ bintang di GitHub
Penerangan: "Kelas CSS untuk memindahkan DOM anda!"
Saiz perpustakaan: 78.8 kB
GitHub: https://github.com/elrumordelaluz/csshake
Lesen: MIT

Apple mempopularkan trend UI yang menggoncang elemen UI dengan kuat (kotak dialog, tetingkap modal, kotak teks) apabila pengguna memasukkan jawapan yang salah – merujuk kepada seseorang yang menggelengkan kepala untuk berkata "tidak". CSShake menawarkan pelbagai animasi "goncang" yang menarik dan perpustakaan tidak mempunyai kekurangan variasi.
Walaupun perpustakaan ini lebih popular daripada DynCSS, saya merasakan saiznya tidak dibenarkan oleh ciri tambahan yang dibawanya. Walaupun animasinya bagus, saya tidak dapat bayangkan kes-kes di mana tidak ada keperluan untuk memasukkan perpustakaan lain untuk semua kesan tidak goncang.
Tetapi mungkin saya hanya kekurangan imaginasi?

Hover.css

Hover.css ialah perpustakaan animasi CSS yang direka untuk digunakan dengan butang dan komponen UI lain di tapak web anda. Ia menawarkan peralihan 2D yang indah, dengan pelbagai animasi yang bernas.

Pencipta: Ian Lunn
Tarikh diterbitkan: 2014
Versi semasa: 2.0.2
Populariti: 10,700+ bintang di GitHub
Penerangan: "Gunakan dengan mudah pada projek anda, edit atau…hanya untuk inspirasi"
Saiz perpustakaan: 104.2 kB
GitHub: https://github.com/IanLunn/Hover
Lesen: MIT

Hover.css amat sesuai untuk menghidupkan elemen halaman seperti butang, logo, komponen SVG atau imej seperti yang dinyatakan pada halaman utama perpustakaan. Ia mempunyai senarai animasi yang lengkap, yang menerangkan saiznya yang besar (saya juga berpendapat bahawa saiznya boleh dioptimumkan lagi). Mungkin kesan yang paling luar biasa ialah buih pertuturan dan gelung.

Velocity.js

Velocity.js ialah perpustakaan JavaScript yang canggih untuk animasi seperti Fade & Slide, Scroll, Stop, Finish, Reverse dan banyak lagi.
Dia mempunyai senarai besar pengguna dengan syarikat seperti Tumblr, WhatsApp, MailChimp, Scribd, Gap dan HTC dalam senarainya.

Pencipta: Julian Shapiro
Tarikh diterbitkan: 2014
Versi semasa: 1.2.2
Populariti: 8,700+ bintang di GitHub
Penerangan: "Animasi JavaScript pantas"
Saiz perpustakaan: 34.8 kB
GitHub: https://github.com/julianshapiro/velocity
Lesen: MIT

Velocity tidak semestinya sesuai untuk semua orang kerana ia adalah enjin animasi JavaScript dan enjin animasi JavaScript ini menggunakan API yang sama seperti jQuery $.animate(). Ia berfungsi dengan dan tanpa kehadiran jQuery. Sebab saya rasa perlu untuk memasukkannya ke dalam senarai ini adalah kerana ia sangat pantas dan menampilkan animasi warna, transformasi, gelung, pelonggaran – ia adalah gabungan peralihan jQuery dan CSS yang terbaik.

favico.js

Flavico direka bentuk untuk kes penggunaan yang sangat khusus: pustaka ini membolehkan anda menambahkan animasi lencana pada favicon anda dengan mudah, lencana menjadi sesuatu yang berpotensi sangat pelbagai. Apl web yang perlu memberitahu penggunanya tentang kehadiran kandungan yang dikemas kini (contohnya: tweet baharu, e-mel, siaran, artikel, dll.) akan dapat menggunakan perpustakaan yang elegan ini dengan sangat baik. Lihat tapak mereka untuk lebih memahami apa yang rangka kerja ini membolehkan anda lakukan.

Pencipta: Miroslav Magda
Tarikh diterbitkan: 2013
Versi semasa: 0.3.9
Populariti: 4,900+ bintang di GitHub
Penerangan: "Gunakan favicon anda dengan lencana, imej atau video"
Saiz perpustakaan: 8.9 kB
GitHub: https://github.com/ejci/favico.js
Lesen: MIT

Favicon.js lebih kepada utiliti animasi yang sesuai untuk lencana, imej dan video. Saiz perpustakaan dioptimumkan dengan baik untuk kegunaan pengeluaran.

AniJS

Perpustakaan seterusnya menarik kerana pendekatannya yang unik. AniJS ialah perpustakaan animasi yang membolehkan anda menambah animasi pada elemen menggunakan DSL (Bahasa Khusus Domain) seperti berikut:

Jika klik, Pada Petak, Lakukan animasi goyah Ke .container-box

Pencipta: anijs
Tarikh diterbitkan: 2014
Versi semasa: 0.9.3
Populariti: 2,500+ bintang di GitHub
Penerangan: "Perpustakaan untuk meningkatkan reka bentuk web anda tanpa pengekodan"
Saiz perpustakaan: 10.5 kB
GitHub: https://github.com/anijs/anijs
Lesen: MIT

AniJS ialah perpustakaan bersaiz munasabah memandangkan ciri-cirinya. Format pelaksanaan agak berbeza berbanding perpustakaan animasi lain (yang kadangkala kelihatan tidak jelas). Pustaka ini patut dicuba, sekurang-kurangnya sekali untuk projek anda. Memang nampak sangat kecil jika dibandingkan dengan persaingan tetapi ia berpotensi untuk berkembang pada masa hadapan.

Kesimpulan

Terdapat banyak perpustakaan menunggu untuk dilaksanakan dalam projek anda. Yang dibentangkan di atas adalah pilihan gabungan kecanggihan dan kestabilan terbaik. Walaupun menggunakan perpustakaan animasi dalam projek anda sudah tentu boleh meningkatkan interaktiviti, jika disalahgunakan, animasi menghasilkan kesan yang bertentangan dengan yang dijangkakan dan mengelirukan pengguna. Berhati-hati dan gunakan dengan bijak.
Dan anda, apakah perpustakaan animasi kegemaran anda?
Artikel Asal de Tanay Pant
www.sitepoint.com/top-9-animation-libraries-use-2016/
Diterjemah dari bahasa Inggeris oleh JS Staff
Antoine @JS-Republic

[jenis pemisah=”” saiz=”” ikon=”bintang”] [warna kotak tindakan=”default” tajuk=”” description=”JS-REPUBLIC ialah syarikat perkhidmatan yang mengkhusus dalam pembangunan JavaScript. Kami adalah pusat latihan yang diluluskan. Dapatkan semua latihan teknikal kami di tapak rakan kongsi kami khusus untuk Latihan” btn_label=”Latihan kami” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”bintang” btn_external =”1″]