Contoh implementasi animasi pengguliran mulus pemenang penghargaan terminal seluler Html5

Artikel ini memperkenalkan contoh penerapan animasi pengguliran mulus pemenang penghargaan di terminal seluler Html5 dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:

analisis kebutuhan

Haha jelas banget langsung setelah diupload gambar dinamisnya.

Ini bergulir, bergulir, jadi bagaimana cara membuatnya? Mari kita rangkum:

Sebenarnya sangat sederhana. <div> terluar digunakan sebagai jendela tetap, <ul> bagian dalam mengontrol pergerakan, dan <li> bagian dalam digunakan untuk menampilkan animasi.

 <div class=roll id=roll> <ul> <li>Struktur pertama</li> <li>Struktur kedua</li> <li>Struktur ketiga</li> <li>Struktur keempat</ li> <li>Struktur kelima</li> <li>Struktur keenam</li> <li>Struktur ketujuh</li> <li>Struktur kedelapan</li> </ul></div>

Pertama-tama terapkan gaya css dasar

 *{ margin:0; padding:0;}.roll{ margin: 100px otomatis; lebar: 200px; tinggi: 40px; overflow:hidden; border: 1px solid aquamarine;}.roll ul{ gaya daftar: tidak ada;}. roll li{ tinggi baris:20px; ukuran font:14px;

Anda dapat melihat gaya umumnya:

metode menghidupkan()

$(selector).animate(styles,speed,easing,callback)

parameter:

gaya: parameter yang diperlukan, gaya css yang perlu dianimasikan (gunakan penamaan huruf besar/kecil)

kecepatan: Menentukan kecepatan animasi

@angka:1000(ms)

@string: lambat, normal, cepat

pelonggaran: kecepatan animasi (ayunan, linier)

callback: fungsi panggilan balik setelah fungsi dijalankan

 $(document).ready(function(){ setInterval(function(){ // Tambahkan timer untuk mengkonversi setiap 1,5 detik $(#roll).find(ul:first).animate({ marginTop:-40px // The jarak setiap gerakan},500,function(){ //Waktu gerakan animasi //$(ini) mengacu pada objek ul, //Setelah ul direset, masukkan elemen pertama dan kedua //ke posisi elemen terakhir ul $(this).css({marginTop:0px}).find(li:first).appendTo(this ); $(ini).menemukan(li:pertama).appendTo(ini });

Lihatlah efeknya:

Melalui key frame di css3, Anda bisa mendapatkan efek lompatan langkah. Mari kita lihat sekilas idenya terlebih dahulu.

1. Jika itu adalah penghargaan hard-coded, maka Anda perlu menyalin yang depan ke belakang. Jika diundi satu per satu, salin yang pertama. Jika digulung menjadi dua, salin yang pertama dan kedua .

 <div class=roll id=roll> <ul> <li>Struktur pertama</li> <li>Struktur kedua</li> <li>Struktur ketiga</li> <li>Struktur keempat</ li> <li>Struktur kelima</li> <li>Struktur keenam</li> <li>Struktur ketujuh</li> <li>Struktur kedelapan</li> <li>Struktur pertama</li > <li>Struktur kedua</li> </ul></div>

2. Kemudian hitung berapa kali harus di-scroll dan berapa detik sekaligus. Contohnya dua kali scroll, yang memakan waktu 5 detik, jadi waktu animasi CSS3 adalah 5 detik. Jadi @keyframe perlu dibagi menjadi berapa bagian? Karena jeda, setiap scroll memerlukan dua copy, dan yang terakhir harus lompat sehingga hanya ada satu copy, jadi diperlukan 5 * 2 - 1 = 9 copy. Anda dapat mengetahuinya dengan melihat kode:

 /*Tidak ada pemrosesan kompatibilitas yang dilakukan di sini*/.roll ul{ gaya daftar: tidak ada; animasi: ani 5 detik linier tak terbatas; /*Animasi ani, 5 detik, diputar dengan kecepatan konstan dalam satu putaran*/}@keyframes ani{ 0 %{ margin-atas : 0; } 12,5%{ margin-atas: 0; } 25%{ margin-atas: -40 piksel; } 50%{ margin-atas: -80 piksel; } 62,5%{ margin-atas: -80 piksel; } 75%{ margin-atas: -120 piksel; } 87,5%{ margin-atas: -120 piksel; top: -160px; /*Yang terakhir adalah yang dapat mengganggu animasi*/ }}

Jika jumlahnya tidak pasti, maka Anda perlu menghitungnya secara dinamis dan menggunakan js untuk menambahkan @keyframes secara dinamis. Pada saat itu, selama Anda bisa menghitung interval dan jarak pergerakan, tidak masalah.

1. Pertama, dapatkan panjang <li>

2. Kemudian hitung persentase intervalnya. Karena ada jeda, ingatlah untuk menggunakan jumlah detik × 2

3. Kemudian gunakan string untuk mengeja @keyframes, 0~length, termasuk panjangnya, karena masih ada satu lagi, bilangan genap dan bilangan ganjil dipisah.

4. Kloning kata pertama dan kedua di <ul> hingga akhir <ul>

5. Buat tag <style> dan tambahkan ke <head>

6. Tambahkan atribut animasi ke <ul>

Tanpa basa-basi lagi, mari kita bicara tentang kodenya:

 function addKeyFrame(){ var ulObj = $(#roll ul), //Dapatkan panjang objek ul = $(#roll li).length, //Dapatkan panjang array li per = 100 / (panjang / 2 * 2 ) ; / /Hitung persentase interval tengah//Sambungan string var keyframes = `/ @keyframes ani{`; for(var i = 0; i<=length; i++){ keyframes+=`${i * per}%{ margin-atas: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px }`; } bingkai utama+='}'; li:pertama), //Dapatkan elemen pertama liSec = liFirst.next(); //Dapatkan elemen kedua ulObj.append(liFirst.clone()).append(liSec.clone()); //Masukkan kedua elemen ke dalam ul $(<style>).attr(type,text/ css). html(keyframes).appendTo($(head)); //Buat tag gaya untuk menyisipkan keyframe ke dalam head ulObj.css(animation,ani 5s linear unlimited); //Tambahkan animasi css3 ke ul} addKeyFrame();

Zepto di sisi mobile tidak memiliki fungsi animate. Jika tidak menggunakan atribut CSS3, bagaimana cara menulisnya di JS?

 var timer,atas;fungsi roll(){ var ulObj = $(#roll).find(ul), panjang = $(#roll li).length, liFirst = $(#roll).find(li:first); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); //Tambahkan yang pertama dan kedua ke tag <ul> clearInterval(timer); timer = setInterval(function(){ //Setel timer var top = ulObj.css(margin-top); top = + top.slice( 0,-2); if(top != -(20 * length)){ //Dapatkan tinggi saat ini. Jika tidak di akhir, naik ke atas -= 40; ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-top:top}); }else{ //Jika mencapai akhir, maka akan segera mencapai nol top = 0; {-webkit- transisi: tidak ada, transisi: tidak ada, margin-top: atas}); setTimeout(function(){ //Tambahkan penundaan di sini, yang juga harus ditempatkan di akhir antrian eksekusi, untuk menghindari penggabungan dua animasi top -= ulObj.css({-webkit-transition:all 1s,transition:all 1s,margin-atas :atas}); },0) } },2000);}gulungan();

Jika ada cara lain, lain kali saya akan memperbaruinya. Namun untuk seluler, ini sudah cukup.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.