Penjana CSS Cubic-Bezier

Alat ini membolehkan anda membentuk lengkuk easing CSS cubic-bezier() tersuai dengan empat pelungsur dan pratontonnya secara langsung sebelum menyalin kod. Laraskan nilai titik kawalan x1, y1, x2 dan y2, lihat lengkuk dan elemen pratonton yang bergerak dikemas kini serta-merta, kemudian salin transition-timing-function: cubic-bezier(...) terus ke dalam helaian gaya anda.

Apakah alat ini?

cubic-bezier() ialah fungsi masa CSS yang mengawal bagaimana nilai beranimasi atau peralihan memecut dan memperlahan sepanjang masa, berbanding bergerak pada kadar tetap. Ia ditakrifkan oleh dua titik kawalan — (x1, y1) dan (x2, y2) — yang membengkokkan lengkuk antara titik mula tetap (0,0) dan titik akhir (1,1). Nilai x mesti kekal antara 0 dan 1, tetapi nilai y boleh melebihi julat itu untuk mencipta kesan overshoot atau lantunan.

Ditulis secara manual, menghaluskan empat nombor perpuluhan untuk mendapatkan rasa yang tidak terlalu mendadak mahupun terlalu lembik memerlukan banyak cuba-jaya. Alat ini menggantikan tekaan itu dengan manipulasi terus: seret pelungsur, lihat lengkuk membengkok dan bola pratonton bergerak sewajarnya, dan salin CSS sebaik sahaja gerakan itu terasa betul.

Sumber: CSS Easing Functions Level 1, W3C — spesifikasi yang mentakrifkan cubic-bezier() dan lima kata kunci bernama yang menjadi asas praset alat ini.

Kenapa guna alat ini?

Graf SVG langsung menunjukkan dengan tepat bagaimana lengkuk anda membengkok antara titik mula dan akhir yang tetap, dengan kedua-dua titik kawalan dan pemegangnya dilukis untuk kejelasan.
Butang Play menganimasikan elemen pratonton merentasi trek menggunakan lengkuk sebenar anda, supaya anda boleh rasa gerakan itu, bukan sekadar melihat graf statik.
Praset sekali klik untuk lima fungsi easing bernama standard — ease, ease-in, ease-out, ease-in-out dan linear — seperti didokumenkan dalam spesifikasi CSS Easing Functions.
Nilai-Y boleh turun bawah 0 atau naik atas 1, membolehkan anda membina easing gaya overshoot/lantunan yang tidak boleh dihasilkan oleh kata kunci bernama.
Menghasilkan CSS transition-timing-function sedia untuk ditampal — nilai yang sama juga berfungsi untuk animation-timing-function.
Berjalan sepenuhnya dalam pelayar anda — tiada apa yang anda konfigurasikan dimuat naik ke mana-mana. Percuma, tiada pendaftaran.

Cara menggunakannya

Seret pelungsur x1/y1 untuk menetapkan titik kawalan pertama, yang membentuk bagaimana animasi bermula.
Seret pelungsur x2/y2 untuk menetapkan titik kawalan kedua, yang membentuk bagaimana animasi berakhir.
Perhatikan lengkuk hitam pada graf — lengkuk yang menggelembung di atas garis pepenjuru pada mulanya bermaksud gerakan bermula pantas, yang kekal di bawahnya bermaksud gerakan bermula perlahan.
Klik Play untuk melihat elemen pratonton bergerak merentasi trek menggunakan lengkuk anda sebagai transition-timing-function.
Cuba praset (ease, ease-in, ease-out, ease-in-out, linear) sebagai titik permulaan, kemudian gerakkan pelungsur dari situ.
Salin CSS yang dijana dan tampalkannya ke dalam peraturan transition atau animation.

Contoh

Input

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Hasil

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Ini adalah kata kunci ease standard CSS ditulis sebagai titik kawalan eksplisit — permulaan pantas, pecutan tajam, kemudian perlahan secara beransur-ansur menuju penghujung.

Kenapa nilai-y boleh melebihi 0–1

Berbeza dengan paksi-x, yang mewakili masa dan mesti berjalan dari 0 hingga 1, paksi-y mewakili kemajuan nilai yang beranimasi dan tiada had sebegitu. Menetapkan y1 di bawah 0 atau y2 di atas 1 menjadikan lengkuk itu tercelup melepasi nilai mula atau melampau nilai akhir sebelum menetap — asas kesan overshoot dan anticipation yang digunakan dalam tekanan butang, kemunculan modal dan mikro-interaksi UI yang bermain. Tiada satu pun daripada lima kata kunci bernama (ease, ease-in, ease-out, ease-in-out, linear) boleh menghasilkan ini; anda memerlukan cubic-bezier() tersuai untuknya.

transition-timing-function vs. animation-timing-function

Nilai cubic-bezier() yang dijana alat ini berfungsi sama dalam kedua-dua sifat. Gunakan transition-timing-function apabila gerakan dicetuskan oleh perubahan keadaan (seperti hover atau togol kelas), dan animation-timing-function di dalam peraturan animasi berasaskan @keyframes apabila anda memerlukan rasa easing yang sama digunakan secara automatik atau dalam gelung.

Corak easing biasa

Maklum balas UI segera (butang, togol): kekalkan titik kawalan dekat dengan garis pepenjuru dengan sedikit kecenderungan ease-out, cth. cubic-bezier(0.4, 0, 0.2, 1).
Lengkuk standard Material Design: cubic-bezier(0.4, 0, 0.2, 1) — permulaan pantas, penamat lembut, digunakan secara meluas untuk peralihan panel dan kad.
Lantunan/overshoot: tolak y2 di atas 1, cth. cubic-bezier(0.34, 1.56, 0.64, 1), untuk rasa pop-in yang bermain.
Anticipation sebelum pergerakan: tolak y1 di bawah 0 supaya elemen menarik balik sedikit sebelum bergerak ke hadapan.
Ease-in-out lancar untuk animasi bergelung: kekalkan lengkuk hampir simetri di sekitar pusat.

Digandingkan dengan alat CSS lain

Lengkuk easing jarang berdiri sendiri — ia biasanya digunakan pada elemen yang juga memerlukan bayang, sudut bulat, atau gradien ditakrifkan. Jana penggayaan visual dengan alat CSS lain di bawah, kemudian tambahkan fungsi masa daripada alat ini ke dalam peraturan atau pengisytiharan transition/animation yang sama.

→ Penjana CSS Box-Shadow · Penjana CSS Border-Radius

Soalan lazim

Apakah maksud sebenar empat nombor dalam cubic-bezier()?

Ia adalah koordinat dua titik kawalan, (x1, y1) dan (x2, y2), yang membengkokkan lengkuk Bézier berjalan daripada titik mula tetap pada (0,0) hingga titik akhir tetap pada (1,1). Paksi-x mewakili masa berlalu (0 hingga 1) dan paksi-y mewakili sejauh mana sifat yang beranimasi telah berkembang, itulah sebabnya x1 dan x2 mesti kekal dalam 0–1 manakala y1 dan y2 boleh melebihi julat itu.

Apakah perbezaan antara ease, ease-in, ease-out dan ease-in-out?

ease (lalai CSS) bermula pantas, kemudian melembutkan secara beransur-ansur. ease-in bermula perlahan dan memecut menuju penghujung, berguna untuk elemen yang meninggalkan skrin. ease-out bermula pantas dan memperlahan, berguna untuk elemen yang memasuki skrin. ease-in-out perlahan pada kedua-dua hujung dan lebih pantas di tengah, memberikan rasa lancar dan simetri.

Bolehkah saya guna nilai cubic-bezier() yang sama untuk transition dan animation?

Ya. transition-timing-function dan animation-timing-function menerima sintaks cubic-bezier() yang sama persis dan menghasilkan lengkuk easing yang sama — satu-satunya perbezaan ialah sifat CSS mana (transition berbanding animasi keyframes) fungsi masa itu dilampirkan kepada.

Kenapa lengkuk saya kelihatan rosak apabila y1 atau y2 sangat besar atau negatif?

Itu memang dijangka — menolak nilai-y jauh di luar 0–1 mencipta overshoot yang kuat, di mana nilai beranimasi melantun jauh melepasi sasarannya sebelum menetap. Ia kesan yang sah dan selalunya disengajakan, tetapi jika ia kelihatan tidak diingini, bawa y1 dan y2 kembali lebih dekat dengan julat 0–1.

Adakah lengkuk tersuai lebih baik daripada sekadar menggunakan kata kunci bernama?

Tidak semestinya — lima kata kunci (ease, ease-in, ease-out, ease-in-out, linear) meliputi kebanyakan keperluan harian dan lebih mudah dibaca dalam kod. Gunakan cubic-bezier() tersuai apabila anda memerlukan rasa tertentu yang tidak disediakan oleh kata kunci, seperti lantunan, snap yang lebih tajam, atau menyepadankan spesifikasi gerakan sistem reka bentuk tertentu.