Animasi berasaskan JavaScript Menggunakan Anime.js, Bahagian 2: Parameter

Anime.js Animation Tutorial Bahagian 2: Penjelasan terperinci mengenai parameter. Di bahagian pertama tutorial, kami belajar bagaimana menentukan elemen sasaran animasi serta CSS animasi dan sifat DOM. Animasi sebelumnya adalah sangat asas, dan semua elemen sasaran hanya memindahkan jarak tertentu pada kelajuan tetap atau mengubah radius bulat.

Kadang -kadang, anda mungkin perlu menghidupkan elemen sasaran dengan cara yang lebih berirama. Sebagai contoh, anda mungkin memerlukan sepuluh elemen yang berbeza untuk bergerak dari kiri ke kanan, dengan animasi setiap elemen yang melambatkan 500 milisaat antara permulaan. Begitu juga, anda mungkin mahu meningkatkan atau mengurangkan tempoh animasi berdasarkan kedudukan setiap elemen.

Tutorial ini akan menunjukkan kepada anda cara menggunakan anime.js untuk mengawal masa animasi unsur -unsur yang berbeza dengan parameter tertentu, dengan itu mengawal urutan main balik urutan animasi satu elemen atau semua elemen.

Parameter atribut

Parameter ini membolehkan anda mengawal tempoh, kelewatan, dan pelonggaran kesan atribut tunggal atau sekumpulan atribut.

kaedah stagger()

Setakat ini, kami telah menggunakan fungsi untuk lulus nilai yang berbeza untuk kelewatan animasi atau tempoh elemen sasaran. Anda juga boleh mendapatkan fungsi yang sama dengan bantuan kaedah

, yang pada dasarnya membolehkan anda mengawal bagaimana animasi berlaku antara pelbagai elemen. Ia menerima dua parameter. Yang pertama adalah nilai yang anda mahu memohon, dan yang kedua adalah objek dengan banyak parameter yang menentukan bagaimana interleaved digunakan. stagger()

Berikut adalah contoh yang menunjukkan interleaving parameter

ditetapkan kepada 1000. Contohnya adalah seperti berikut: start

// 持续时间从1000开始，每次增加800
duration: function(target, index) {
    return 1000 + index * 800;
},

// 使用stagger()实现等效功能
duration: anime.stagger(800, {"start": 1000})

Bagaimana jika nilai tempoh bukan sifar mesti digunakan pada permulaan elemen terakhir? Dalam kes ini, kita boleh menggunakan parameter berikut kaedah

untuk mencapai matlamat ini. Seperti yang anda lihat, hasil akhirnya tidak ada perbezaan. stagger()

Harus diingat bahawa kaedah

tidak berfungsi dalam versi lama perpustakaan. Pastikan anda menggunakan versi terkini untuk mengelakkan sebarang kesilapan. stagger

Ringkasan

Dalam tutorial ini, anda mempelajari pelbagai jenis parameter yang boleh digunakan untuk mengawal animasi elemen sasaran dalam anime.js. Parameter atribut digunakan untuk mengawal animasi atribut tunggal.

Anda boleh menggunakannya untuk mengawal susunan di mana animasi dimainkan untuk satu elemen. Parameter fungsi membolehkan anda mengawal masa animasi dan kadar unsur tunggal berbanding seluruh kumpulan. Parameter animasi membolehkan anda mengawal bagaimana animasi dimainkan untuk elemen yang berbeza.

Atas ialah kandungan terperinci Animasi berasaskan JavaScript Menggunakan Anime.js, Bahagian 2: Parameter. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!