animasi jquery menetapkan kelajuan seragam

Kesan animasi sangat biasa dalam pembangunan web. Kesan animasi boleh meningkatkan pengalaman pengguna dan menjadikan halaman web lebih hidup dan menarik. Dalam proses merealisasikan kesan animasi, jQuery ialah alat yang sangat biasa digunakan Ia memberikan kami kaedah tetapan animasi yang kaya dan mudah, termasuk tetapan animasi seragam.

Animasi seragam, iaitu kelajuan objek sentiasa kekal tidak berubah semasa proses animasi. Ia lebih mudah daripada jenis kesan animasi lain, tetapi ia sangat praktikal dalam senario tertentu. Jadi, bagaimana untuk menetapkan animasi seragam dalam jQuery? Mari perkenalkan secara terperinci di bawah.

Pertama sekali, kaedah yang anda perlu gunakan untuk menetapkan animasi seragam dalam jQuery ialah animate(). Melalui kaedah animate(), kita boleh melaksanakan kesan animasi tersuai untuk elemen tertentu. Dalam kaedah ini, kita boleh menggunakan parameter langkah untuk menentukan kesan animasi seragam.

Jadi, apakah parameter langkah? Ringkasnya, ia adalah fungsi yang dipanggil pada setiap bingkai animasi. Kita boleh mencapai kesan animasi yang berbeza dengan menetapkan logik yang sesuai dalam fungsi langkah. Tetapkan parameter langkah kepada fungsi, contohnya adalah seperti berikut:

$(selector).animate({
    // 动画的属性和值
},
{
    duration: 1000, // 动画执行的时间
    step: function (now, fx) {
        // 设置匀速动画
    }
});

Dalam kod di atas, kami menetapkan masa pelaksanaan animasi melalui parameter kedua dalam kaedah animate(). Langkah parameter mewakili fungsi panggil balik yang akan dipanggil pada setiap bingkai proses animasi. Fungsi panggil balik ini mempunyai dua parameter, kini mewakili nilai atribut semasa (boleh menjadi nombor atau rentetan), dan fx mewakili objek animasi semasa.

Dalam fungsi step(), kita boleh mencapai animasi seragam dengan beroperasi pada atribut now. Pelaksanaan animasi seragam adalah untuk menjadikan nilai sekarang meningkat dengan masa, bukannya memecut atau menurun. Di sini kita boleh mengira nilai sekarang melalui formula mudah: sekarang = mula + (akhir - mula)*p, di mana mula dan akhir ialah nilai mula dan nilai akhir atribut masing-masing, dan p mewakili masa semasa dalam jumlah masa, nilainya adalah antara 0 dan 1.

Berikut ialah contoh mudah untuk menunjukkan cara melaksanakan animasi seragam dalam jQuery:

Kod HTML:

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

Kod CSS:

#box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
}

Kod JS :

$(document).ready(function () {
    $("#box").animate({
        left: "400px"
    },
    {
        duration: 5000,
        step: function (now, fx) {
            $(this).css("left", now);
        }
    });
});

Dalam contoh ini, kami mengalihkan elemen div dengan lebar dan ketinggian 100px dan warna latar belakang merah sebanyak 400px ke kanan, dan melaksanakannya selama 5 saat. Dalam fungsi step(), kami menetapkan nilai atribut kiri semasa kepada nilai sekarang, dengan itu mencapai kesan animasi bergerak yang seragam.

Oleh itu, dengan menggunakan kaedah di atas, kita boleh dengan mudah menetapkan kesan animasi seragam dalam jQuery. Sudah tentu, dalam pembangunan sebenar, selain animasi seragam, terdapat banyak lagi jenis kesan animasi yang perlu kita fahami dan pelajari. Melalui latihan dan pengumpulan berterusan, kami boleh menguasai kaedah tetapan animasi jQuery dengan lebih baik, dengan itu mencapai kesan animasi halaman web yang lebih kaya, lebih jelas dan menarik.

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