Jadikan laman web anda interaktif dan menyeronokkan dengan halaju.js (tidak jQuery)

Artikel ini memperkenalkan Velocity.js, perpustakaan animasi JavaScript berprestasi tinggi oleh Julian Shapiro, menunjukkan keupayaannya tanpa bergantung pada jQuery. Ini adalah yang ketiga dalam siri meneroka perpustakaan animasi DOM yang dinamik di luar CSS. Artikel sebelumnya dilindungi anime.js dan kute.js.

terima kasih khas kepada James Hibbard dan pemaju halaju, bersama dengan penyumbang komuniti, atas sokongan mereka.

Ciri -ciri utama velocity.js: velocity.js adalah alat yang mantap untuk menghidupkan sifat CSS, transformasi, SVG, dan acara tatal, semuanya dalam vanila JavaScript. API yang fleksibel, sama dengan JQuery's

, menawarkan ciri -ciri seperti gelung, kelewatan, pilihan pelonggaran (termasuk fizik musim bunga), dan kawalan tempoh. ForceFeeding membolehkan definisi tepat animasi permulaan dan nilai akhir. Selain itu, ia memberikan kawalan ke atas urutan animasi (berhenti, menjeda, membalikkan, menyambung semula). Pek UI halaju memanjangkan fungsi dengan kesan pra-bina dan penciptaan animasi tersuai.

$.animate()

unsur -unsur animatable:

velocity.js animates:

sifat CSS angka (termasuk warna)

• Transforms
• SVG Properties
• acara tatal (halaman atau bekas)
• animasi pudar dan slaid
Nota: Ia biasanya menghidupkan satu harta angka pada satu masa. Untuk terjemahan pelbagai paksi (mis.,

dan

), gunakan sifat berasingan. ForceFeeding memberikan pengecualian, yang membolehkan spesifikasi nilai serentak. translateX translateY

Pilihan:

Objek Pilihan Velocity menawarkan fleksibiliti:

(Milliseconds)
• duration
(JQuery UI, CSS3 Easings, Bezier Curves, Spring Physics)
• easing
(bilangan pengulangan atau
• untuk tak terhingga) loop true
(Milliseconds)
• delay
Rujuk dokumentasi halaju untuk senarai pilihan lengkap.

sintaks:

Walaupun Velocity.js berkongsi API JQuery, menjadikannya mudah bagi pengguna jQuery untuk beralih (menggantikan

dengan

), ia berfungsi dengan sempurna tanpa jQuery. Sintaks asas ialah: $.animate() $.velocity()

animasi chaining:

Velocity(element, {property: value}, {option: optionValue});

Animasi pelbagai elemen:

Velocity(element1, {property: value}, {option: optionValue});
Velocity(element1, {property: value}, {option: optionValue});

unit (,

const elements = document.querySelectorAll('<div>');
Velocity(elements, {property: value}, {option: optionValue});

,

, px, %, rem) disokong. Velocity membuat unit jika ditinggalkan (biasanya em). Matematik relatif (, vw/vh, deg, px) juga disokong. = -= *= ForceFeeding: /=

Daripada bergantung pada halaju.js untuk mendapatkan nilai awal, gunakan forceFeeding:

Velocity(element, {property: value}, {option: optionValue});

array mengandungi: nilai akhir, pelonggaran pilihan, dan nilai mula.

Kawalan animasi:

Kawalan animasi menggunakan:

• Velocity(elem, 'stop');
• Velocity(elem, 'pause');
• Velocity(elem, 'reverse');
• Artikel kemudian menyediakan beberapa demo (bola jatuh, bola melantun yang dikawal oleh butang, menatal animasi, animasi SVG, dan menggunakan pek UI Velocity) yang menggambarkan konsep-konsep ini. Setiap kod demo boleh didapati melalui pautan codepen dalam artikel. Akhirnya, artikel itu disimpulkan dengan seksyen Soalan Lazim yang menangani soalan penggunaan halaju biasa, termasuk penggunaannya tanpa jQuery. Artikel ini juga termasuk seksyen mengenai sumber tambahan untuk pembelajaran selanjutnya. Velocity(elem, 'resume');

Atas ialah kandungan terperinci Jadikan laman web anda interaktif dan menyeronokkan dengan halaju.js (tidak jQuery). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!