jquery menetapkan pusat putaran

Dengan peningkatan CSS3, semakin ramai pereka dan pembangun web mula menggunakan pelbagai kesan animasi CSS3 untuk mencipta kesan halaman dinamik. Antaranya, kesan animasi putaran adalah kesan yang sangat biasa. Apabila menggunakan jQuery untuk mencipta kesan putaran, cara menetapkan pusat putaran menjadi sangat penting.

Secara amnya, kami menggunakan CSS3 untuk mencipta kesan animasi putaran, dan kami boleh mencapai kesan putaran yang diingini dengan menetapkan pusat putaran. Dalam jQuery, cara untuk mencapai kesan animasi putaran adalah berbeza, jadi menetapkan pusat putaran juga memerlukan pertimbangan tambahan.

Untuk mencapai kesan animasi putaran, kami biasanya menggunakan fungsi animate() jQuery untuk mengawal sudut putaran, tempoh dan atribut lain. Walau bagaimanapun, jika kita tidak menentukan pusat putaran, maka secara lalai pusat putaran akan menjadi sudut kiri atas elemen.

Bayangkan jika elemen yang ingin kita putar ialah segi empat sama, dan pusat putaran lalai ialah sudut kiri atas. Kemudian, apabila elemen berputar melawan arah jam, sudut kanan bawahnya akan sentiasa tersekat pada kedudukan asal elemen. Ini akan menyebabkan elemen berkelip dan melompat dengan ketara apabila berputar, memberikan pengguna pengalaman visual yang buruk.

Oleh itu, kita perlu menentukan pusat putaran untuk mengawal kesan putaran.

JQuery melaksanakan kesan animasi putaran

Apabila menggunakan jQuery untuk melaksanakan kesan animasi putaran, kami biasanya menggunakan atribut transformasi. Atribut transform boleh mengawal sudut putaran elemen dengan menetapkan fungsi rotate().

Walau bagaimanapun, jika kita hanya menetapkan fungsi rotate() dan tidak menentukan pusat putaran, maka elemen akan menggunakan sudut kiri atas lalai sebagai pusat putaran.

Untuk menentukan pusat putaran apabila melaksanakan kesan animasi putaran, kita perlu menggunakan sifat asal-ubah dalam CSS3.

Atribut asal-ubah terdiri daripada tiga nilai. Nilai pertama digunakan untuk mewakili kedudukan pada paksi X, nilai kedua mewakili kedudukan pada paksi Y, dan nilai ketiga boleh menjadi panjang, peratusan, kata kunci, dsb., digunakan untuk mengawal sudut putaran elemen. sepanjang paksi Z.

Biasanya, kami menetapkan atribut transform-origin untuk menentukan pusat putaran seperti berikut:

$(selector).css("transform-origin", x-axis y-axis);

Dalam kod di atas, paksi-x dan paksi-y masing-masing mewakili koordinat pusat putaran yang perlu kita tetapkan. Secara khusus, anda perlu menentukan offset koordinat pusat putaran berbanding sudut kiri atas elemen.

Sebagai contoh, jika kita ingin menggunakan titik tengah elemen sebagai pusat putaran, kita perlu menetapkan koordinat pusat putaran kepada "50% 50%".

Kod sampel:

html:

<div id="box"></div>

css:

#box{
    width: 100px;
    height: 100px;
    background-color: red;
}

javascript:

$("#box").animate({rotate:"180deg"},2000);
$("#box").css("transform-origin", "50% 50%");

Dalam kod di atas, kami menggunakan jQuery Fungsi animate() digunakan untuk mengawal sudut putaran elemen, dan koordinat pusat putaran ditentukan sebagai "50% 50%" sebelum elemen diputar.

Dengan menentukan pusat putaran, kita boleh mengawal perubahan kedudukan elemen dengan mudah semasa putaran dan mengelakkan kelipan dan lompatan yang jelas.

Kesimpulan

Mencipta kesan dinamik ialah bahagian penting dalam reka bentuk web moden. Keupayaan untuk mengawal pusat putaran kesan animasi dengan tepat adalah kemahiran asas untuk menghasilkan pelbagai kesan animasi.

Apabila menggunakan jQuery untuk mencapai kesan animasi putaran, pastikan anda memberi perhatian kepada tetapan pusat putaran. Dengan menetapkan pusat putaran dengan betul, kami boleh mencipta pelbagai kesan animasi yang menarik untuk meningkatkan pengalaman pengguna dan menjadikan tapak web lebih menarik.

Atas ialah kandungan terperinci jquery menetapkan pusat putaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!