Laluan gerakan CSS Bezier Curve

CSS Pure Bezier Curve Motion Paths: Tiga kaedah berbanding

Adakah anda peminat Bezier Curve? Keanggunan dan sifat matematik mereka menjadikan mereka sesuai untuk pelbagai aplikasi, termasuk grafik vektor (SVG, fon), masa animasi, dan, seperti yang kita akan meneroka, laluan gerakan CSS.

Butir-butir artikel ini tiga kaedah CSS sahaja untuk menghidupkan unsur-unsur tepat di sepanjang kurva bezier padu 2D, mengelakkan JavaScript. Kami akan mengkaji setiap pendekatan, kekuatan, dan kelemahannya.

rekap cepat: lengkung bezier padu

Kurva bezier padu ditakrifkan oleh empat mata: dua titik akhir (P0, P3) dan dua titik kawalan (P1, P2). Bentuk lengkung ditentukan oleh kedudukan titik kawalan 'berbanding dengan titik akhir.

Cabaran: Animasi CSS tepat di sepanjang kurva Bezier

Matlamatnya adalah untuk menghidupkan elemen untuk mengikuti lengkung bezier padu yang diberikan hanya menggunakan CSS.

mari kita meneroka tiga penyelesaian:

Kaedah 1: Warp Time (Menggunakan

) animation-timing-function Kaedah ini memanfaatkan fungsi

dalam

. Animasi berasingan mengawal koordinat x dan y, dengan cubic-bezier() masa yang menyimpang untuk setiap paksi untuk dipadankan dengan lengkung. animation-timing-function cubic-bezier()

pro:
• agak mudah bagi mereka yang biasa dengan hack fungsi . cubic-bezier()
cons:
• tidak berfungsi apabila titik akhir berada pada garis mendatar atau menegak (mudah dikurangkan dengan offset kecil), terhad kepada lengkung bezier padu, dan menawarkan kawalan terhad ke atas masa animasi di luar parameter . cubic-bezier()
Kaedah 2: Animasi Bersaing (Menggunakan Multip

Kaedah ini menggunakan pelbagai

peraturan yang secara halus berinteraksi. Animasi mengubah suai harta , dengan bangunan animasi kemudian apabila transformasi yang digunakan oleh yang terdahulu. Ini membolehkan penyelesaian yang menghairankan, walaupun untuk lengkung padu. @keyframes

Pro:

CSS mudah, menyokong sebarang fungsi animasi-masa CSS, dan dengan mudah boleh meluas ke lengkung 3D. @keyframes transform

cons:

Formula untuk mengira kerangka kunci boleh kurang intuitif.
Kaedah 3: Pembinaan Bezier Curve Standard (menggunakan pembolehubah CSS dan
• )
Pendekatan ini secara langsung meniru pembinaan matematik lengkung bezier. Ia menggunakan pembolehubah CSS dan

untuk menentukan dan menghidupkan titik pertengahan, akhirnya membuat lengkung lengkap.

• Pro: Intuitif bagi mereka yang memahami pembinaan lengkung bezier, dengan mudah meluas ke lengkung pesanan yang lebih tinggi dan 3D, dan masa animasi yang fleksibel.
• cons: bergantung pada @property, yang tidak disokong secara universal oleh semua pelayar.

Pertimbangan masa animasi

Semua kaedah menyokong pelbagai fungsi masa animasi (). Kaedah 2 dan 3 secara langsung memohon fungsi ini, manakala Kaedah 1 memerlukan pelarasan yang teliti terhadap parameter animation-timing-function untuk mencapai kesan yang dikehendaki. cubic-bezier()

Kesimpulan

Setiap kaedah menawarkan pendekatan yang unik untuk menghidupkan sepanjang lengkung bezier dengan CSS tulen. Pilihan terbaik bergantung kepada kebiasaan anda dengan teknik, keperluan keserasian pelayar, dan tahap kawalan yang diperlukan melalui masa animasi. Kaedah 2 memberikan keseimbangan kesederhanaan dan fleksibiliti yang baik untuk kebanyakan senario.

Atas ialah kandungan terperinci Laluan gerakan CSS Bezier Curve. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!