Bagaimana untuk mencipta kesan putaran bulatan dengan jquery

Dalam reka bentuk web, kesan animasi merupakan bahagian yang sangat penting, yang boleh meningkatkan keseronokan dan interaktiviti halaman. Putaran bulatan ialah salah satu kesan animasi klasik. Berikut akan memperkenalkan cara menggunakan JQuery untuk mencipta kesan animasi putaran bulatan.

1. Reka Letak HTML

Mula-mula, anda perlu mentakrifkan elemen bekas dalam fail HTML untuk membalut elemen animasi. Tambahkan elemen div di dalam elemen bekas sebagai elemen animasi.

<div class="container">
  <div class="circle"></div>
</div>

2. Membina gaya CSS

Seterusnya, anda perlu menambah gaya CSS untuk elemen kontena dan elemen animasi. Untuk elemen bekas, tetapkan lebar dan tingginya kepada 100% supaya ia memenuhi seluruh halaman. Untuk elemen animasi, tetapkan lebar dan ketinggiannya sama untuk memberikannya kesan bulat. Pada masa yang sama, tetapkan kedudukan dan warna awalnya.

.container{
  width: 100%;
  height: 100%;
}

.circle{
  width: 200px;
  height: 200px;
  background-color: #F44336;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
}

3. JQuery untuk mencapai kesan animasi

Selepas tetapan HTML dan CSS di atas selesai, anda perlu menggunakan JQuery untuk mencapai kesan animasi. JQuery menyediakan kaedah animate(), yang boleh merealisasikan kesan animasi elemen. Pelaksanaan khusus adalah seperti berikut:

$(document).ready(function(){
  animateCircle();
});

function animateCircle(){
  $('.circle').animate({deg: 360}, {
    duration: 2000,
    step: function(now){
      $(this).css({
        transform: 'rotate(' + now + 'deg)'
      });
    },
    complete: animateCircle
  });
}

Seperti yang ditunjukkan di atas, tentukan fungsi animateCircle() untuk menggelungkan animasi putaran bulatan. Gunakan kaedah animate() untuk menetapkan kesan animasi. Antaranya, deg parameter pertama digunakan untuk mewakili sudut putaran bulatan, dan nilai awal ialah 0. tempoh mewakili tempoh animasi, iaitu 2000 milisaat dalam contoh ini. step merujuk kepada fungsi panggil balik semasa animasi Ia akan dipanggil selepas setiap bingkai animasi tamat, hitung sudut baharu berdasarkan nilai deg semasa, dan putar elemen ke sudut baharu melalui kaedah css(). Akhir sekali, lengkap mewakili fungsi panggil balik selepas animasi selesai, yang digunakan untuk terus melaksanakan animasi putaran bulatan dalam gelung.

4. Paparan kesan

Akhir sekali, buka fail HTML dalam penyemak imbas dan anda boleh melihat kesan animasi bulatan berputar.

Di atas ialah langkah-langkah untuk menggunakan JQuery untuk mencipta kesan animasi putaran bulatan. Melalui gabungan penggunaan HTML, CSS dan JQuery, kesan animasi yang lebih kompleks boleh dicapai, menambahkan lagi keseronokan pada halaman web.

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan putaran bulatan dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!