Animasi berasaskan JavaScript menggunakan anime.js, bahagian 1: sasaran dan sifat

anime.js, perpustakaan animasi berasaskan JavaScript yang ringan yang boleh digunakan untuk menghasilkan animasi atribut CSS, atribut SVG atau DOM di laman web. Perpustakaan ini membolehkan anda mengawal aspek animasi dan menyediakan pelbagai cara untuk menentukan elemen sasaran atau sifat -sifat yang akan dihidupkan.

Anda mempunyai kawalan penuh ke atas urutan di mana animasi dimainkan dan bagaimana unsur -unsur yang berbeza disegerakkan. Perpustakaan ini menyokong semua pelayar moden.

Siri tutorial ini akan membimbing anda melalui semua ciri anime.js supaya anda dapat dengan mudah memohon kepada projek -projek sebenar.

Sebelum kita menyelam ke dalam topik, mari pasang perpustakaan terlebih dahulu. Anda boleh memasang menggunakan NPM atau Bower dengan menjalankan arahan berikut:

npm install animejs
bower install animejs

anda juga boleh memuat turun perpustakaan dan memasukkannya ke dalam projek anda, atau pautan terus ke versi terbaru perpustakaan yang dihoskan di CDN.

Selepas pemasangan berjaya, anda boleh menggunakan perpustakaan ini untuk menambah animasi yang menarik kepada unsur -unsur. Kami akan bermula dengan asas -asas perpustakaan dan memberi tumpuan kepada satu kawasan tertentu pada satu masa.

tentukan elemen sasaran

Untuk membuat sebarang animasi menggunakan anime.js, anda mesti memanggil nodelist.

anda juga boleh menggunakan nod dom atau nodel sebagai nilai tag span. Setakat ini, kami telah melakukan ini dengan membuat pembungkus secara manual di HTML. Sekarang, kita akan belajar bagaimana untuk mendapatkan JavaScript untuk memproses tag. Berikut adalah elemen tajuk kami:

<h1 id="Have-a-Great-Day-Ahead">Have a Great Day Ahead</h1>

Terdapat lima perkataan berasingan dalam tajuk, dan kami membungkus setiap perkataan dalam label spannya sendiri. Kemudian berikan hasil akhir kepada tag span, yang sepatutnya menjadi sifar. Ini adalah CSS yang kami gunakan untuk gaya tajuk, dan menggunakan H1 Span sebagai pemilih. Nilai akhir atribut Translate. Kami juga menggunakan kelewatan interleaving dalam permulaan animasi. Anda akan mengetahui lebih lanjut mengenai interleaving dalam anime.js dalam tutorial seterusnya dalam siri ini.

Ini adalah demonstrasi codepen yang menunjukkan animasi ucapan yang kami buat. Klik Butang

Sapa untuk memulakan semula animasi.

Ringkasan

Dalam tutorial ini, anda belajar semua cara untuk memilih elemen sasaran dalam anime.js dan bagaimana untuk menghidupkan atribut CSS yang berbeza dan atribut yang berkaitan dengan elemen sasaran. Walau bagaimanapun, pada ketika ini kita tidak mempunyai kawalan ke atas apa -apa yang berkaitan dengan animasi sebenar.

Dalam tutorial seterusnya dalam siri ini, anda akan belajar bagaimana untuk mengawal pelonggaran, kelewatan, dan tempoh animasi untuk atribut yang berbeza (sebagai kumpulan dan kawalan individu). Anda kemudian akan belajar bagaimana untuk mengawal semua parameter animasi ini untuk setiap elemen.

Atas ialah kandungan terperinci Animasi berasaskan JavaScript menggunakan anime.js, bahagian 1: sasaran dan sifat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!