Bagaimana cara mencipta lengkung kelancaran cubic-bezier tersuai untuk CSS?

Seret dua pemegang titik kawalan pada graf, taip nilai tepat x1, y1, x2, y2, atau pilih pratetap. Kemudian pilih CSS di bawah Format output dan klik Salin untuk mendapatkan nilai cubic-bezier() untuk transition-timing-function.

Bagaimana cara membuat kesan lantunan atau terlajak dengan cubic-bezier?

Seret pemegang di atas atau di bawah kotak supaya nilai Y-nya melepasi 0-1. Y boleh melebihi julat itu, manakala X kekal antara 0 dan 1. Pratetap back-out dan anticipate adalah titik permulaan terlajak sedia ada.

Bolehkah saya mendapatkan kelancaran untuk Tailwind, Framer Motion atau anime.js?

Ya. Tab format output adalah CSS, Tailwind, Framer Motion dan anime.js. Kesemuanya memformat empat nombor yang sama, jadi pilih tab dan klik Salin untuk meletakkan coretan pada papan klip anda.

Bagaimana cara memuatkan nilai cubic-bezier sedia ada untuk diedit?

Tampal nilai seperti cubic-bezier(.17, .67, .83, .67) ke dalam kotak import dan klik Muatkan. Jika empat nombor tidak dapat dibaca, anda mendapat mesej ralat. Lengkung juga disimpan dalam URL halaman selepas hash, jadi ia boleh dikongsi.

Mengapa pratonton terasa lebih perlahan daripada transisi sebenar saya?

Pratonton gerakan menggunakan tetapan Tempoh yang boleh anda ubah, dan lalai adalah lebih perlahan supaya anda boleh mengkaji lengkung. Pendekkan Tempoh, kemudian gunakan Ulang tayang untuk melihat gerakan pada kelajuan yang anda rancang untuk digunakan.

Adakah ia benar-benar percuma?

Ya. Setiap alat adalah percuma untuk digunakan, tanpa akaun dan tanpa kad kredit. Kerja dijalankan pada peranti anda dan bukannya pada pelayan kami, itulah yang menjadikannya percuma untuk dijalankan.

Adakah ia berfungsi pada peranti mudah alih?

Ya. Ia berjalan dalam pelayar mudah alih semasa di iOS dan Android, tanpa apa-apa untuk dipasang.

📈

Penjana Kelancaran Cubic-Bezier CSS percuma

Reka bentuk lengkung kelancaran CSS dengan menyeret titik kawalan, pratonton gerakan secara langsung, dan salin nilai cubic-bezier(). Termasuk pratetap melantun/terpental.

Berjalan dalam pelayar andaTiada daftar, tiada tetingkap timbulTiada log masuk diperlukanPercuma selama-lamanya

Berfungsi luar talian selepas dimuatkan

Seret pemegang teal & merah jambu untuk membentuk lengkung

Titik kawalan

x1y1x2y2

Pratonton gerakan

Tempoh1.6 s

Peralihan lebar

Nilai CSS

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

Pratetapan

Pemegang merah jambu dan teal boleh ditarik ke atas atau bawah kotak (Y melebihi 0-1) untuk mencipta kesan melambung seperti back-out dan anticipate. X kekal dalam 0-1 (masa tidak boleh berbalik).

Kegunaan biasa

CSS peralihan kemudahan kustomReka bentuk kemudahan yang terasa semula jadi untuk kesan hover, menu dan peralihan antara muka pengguna.
Animasi Bounce dan OvershootCipta pergerakan musim semi/melompat yang suka bermain dengan menarik titik kawalan melepasi kotak.
Kemudahan untuk @keyframes animasiPilih fungsi animation-timing-function yang betul untuk animasi CSS keyframe.
Nilai kemudahan untuk perpustakaan animasi JSDapatkan nilai cubic-bezier untuk GSAP, Framer Motion, anime.js dan banyak lagi.
Fahami cara kemudahan berfungsiLihat hubungan antara lengkung bezier dan pergerakan yang dihasilkannya.

Cara ia berfungsi

Editor ini dibina sepenuhnya dalam pelayar menggunakan state React dan SVG — tiada pustaka mengendalikan matematik lengkung. Dua titik kawalan boleh-seret menakrifkan laluan Bezier kubik SVG, dan enjin animasi CSS pelayar sendiri menjalankan pratonton gerakan dengan menyuntik nilai cubic-bezier() terhasil terus ke dalam peraturan @keyframes.

1
Seret atau taip titik kawalan
Dua pemegang (P1 dalam teal, P2 dalam rose) duduk pada kanvas SVG. Menyeret menggunakan Pointer Events API dengan setPointerCapture supaya pemegang menjejaki jari atau kursor anda walaupun di luar sempadan SVG. Anda juga boleh menolak pemegang dengan kekunci anak panah atau taip nilai tepat ke dalam input nombor x1/y1/x2/y2.
2
SVG melukis lengkung secara masa nyata
Lengkung itu ialah satu elemen SVG <path> yang arahan C (Bezier kubik) dikira semula daripada empat koordinat titik kawalan pada setiap kemas kini state. Tiada kanvas, tiada pustaka luaran — pemapar SVG pelayar melukis laluan terus.
3
Enjin CSS pelayar mempratonton pelonggaran
Tiga animasi langsung (titik gelongsor, peralihan lebar, dan skala) menjalankan @keyframes CSS dengan nilai cubic-bezier() disuntik sebaris. Enjin animasi pelayar sendiri mentafsir lengkung itu, jadi apa yang anda lihat tepat apa yang CSS pengeluaran anda akan hasilkan.
4
Salin cebisan dalam sintaks kerangka kerja anda
Tab memformat empat nombor yang sama sebagai transition-timing-function CSS, kelas nilai-sembarang Tailwind, tatasusunan easing Framer Motion, atau rentetan easing anime.js. Cebisan itu ditulis ke papan keratan dengan navigator.clipboard. Lengkung itu juga dikod dalam hash URL (#b=x1,y1,x2,y2) supaya anda boleh kongsi atau tandabuku ia.