Generator Easing Cubic-Bezier

Apa itu generator easing cubic-bezier?

*Fungsi easing* di CSS mengatur bagaimana animasi mempercepat dan memperlambat sepanjang durasinya. Kata kunci ease, ease-in, ease-out, dan ease-in-out adalah singkatan untuk empat kurva tertentu. Untuk apa pun di luar keempatnya, CSS menyediakan cubic-bezier(), sebuah fungsi yang menerima empat angka dan menggambar kurva kustom.

Keempat angka itu adalah koordinat dua titik kontrol (x1, y1, x2, y2). Angka ini sulit ditulis dengan tangan karena perubahan kecil berdampak visual besar, dan overshoot kecil menghasilkan gerakan *memantul* yang tidak terlihat hanya dari angkanya. Editor visual membuatmu bisa menggeser handle dan melihat kurvanya merespons, jauh lebih cepat daripada mengutak-atik angka desimal.

Editor Coddy menggambar kurva secara real time, menganimasikan bola preview dengan easing-mu, dan menyediakan preset untuk pola umum: kata kunci CSS, kurva standar Material Design, bouncy out, dan anticipate-overshoot. Salin string cubic-bezier() hasilnya lalu tempel ke CSS-mu. Semuanya berjalan di browser-mu.

Yang perlu diketahui tentang easing cubic-bezier

• Kurva menggambarkan *progres* terhadap *waktu*. Waktu berjalan dari kiri ke kanan (0 → 1); progres berjalan dari bawah ke atas (0 → 1). Garis diagonal lurus adalah linear, yaitu progres yang sama untuk setiap satuan waktu.
• Koordinat X dari kedua titik kontrol dibatasi di 0..1. Koordinat Y boleh di bawah 0 atau di atas 1. Dari situlah easing bouncy, anticipate, dan overshoot berasal (animasi sempat melewati tujuannya atau mulai ke arah yang salah).
• Kurva *ease-out* (sebagian besar progres terjadi di awal) terasa responsif dan cekatan, cocok untuk elemen yang muncul dan reaksi tombol. Kurva *ease-in* (progres terjadi di akhir) terasa lamban, biasanya salah untuk UI, tapi berguna untuk elemen yang keluar.
• Easing *standar* yang direkomendasikan Material Design adalah cubic-bezier(0.4, 0, 0.2, 1): mulai cepat, selesai pelan. iOS memakai sesuatu yang mendekati cubic-bezier(0.42, 0, 0.58, 1) (ease-in-out).
• Untuk animasi singkat (≤200ms), kebanyakan easing terlihat mirip, karena durasi lebih berpengaruh daripada kurvanya. Untuk animasi yang lebih panjang (300ms ke atas), easing-lah yang membuat gerakan terasa rapi atau asal-asalan.

Cara mendesain easing cubic-bezier

1. 1

   Mulai dari preset

   Klik preset yang paling dekat dengan kesan yang kamu inginkan. *Material standard* dan *Bouncy out* adalah titik awal yang bagus untuk gerakan UI; *ease-out* adalah pilihan default yang aman untuk animasi masuk.

2. 2

   Geser kedua handle

   Handle berwarna teal adalah dua titik kontrolnya. Geser yang pertama untuk mengatur bagaimana animasi *dimulai*; geser yang kedua untuk mengatur bagaimana animasi *berakhir*. Menarik handle melewati tepi atas menghasilkan overshoot.

3. 3

   Pilih durasi lalu putar ulang

   Pilih durasi yang realistis untuk animasi sungguhanmu. Transisi UI biasanya 150 sampai 300ms; gerakan penekanan 400 sampai 600ms. Klik *Putar ulang* untuk menjalankan preview lagi dengan durasi baru.

4. 4

   Sempurnakan dengan input angka

   Untuk nilai yang presisi, ketik di input X1/Y1/X2/Y2 di bawah kurva. Y boleh di bawah 0 atau di atas 1; X selalu 0..1.

5. 5

   Salin CSS-nya

   Klik *Salin* untuk mendapatkan aturan transition lengkap. Masukkan ke stylesheet-mu dan ganti transform dengan property apa pun yang sedang kamu animasikan.

Referensi cepat cubic-bezier

Easing umum dan nilai cubic-bezier di baliknya. Keempat kata kunci di bawah ini adalah alias untuk kurva cubic-bezier tertentu.

Contoh cubic-bezier untuk dicoba

.btn {    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover {    transform: translateY(-2px);}

.card {    transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}

.hero {    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}

Kesalahan umum saat memakai easing

• Memakai ease-in untuk animasi masuk. Easing ini mulai pelan dan berakhir cepat, kebalikan dari kesan responsif. Pakai ease-out sebagai gantinya.
• Memilih linear untuk gerakan UI karena terkesan netral. Gerakan dengan kecepatan konstan terlihat mekanis; tepat untuk progress bar dan spinner, tapi jarang untuk yang lain.
• Memakai overshoot berlebihan di setiap transisi. Easing memantul adalah aksen, bukan default. Kalau dipakai di mana-mana, hasilnya terasa kacau.
• Mencoba memperbaiki gerakan yang terasa lamban dengan mengganti easing, bukan durasinya. Kalau ease-out 600ms terasa lamban, coba 300ms dulu.
• Lupa bahwa koordinat X kedua handle dibatasi di 0..1. Menggeser handle keluar dari sisi kiri atau kanan kanvas tidak berpengaruh; hanya Y yang bisa melewati kotaknya.

FAQ Cubic-Bezier