Kurva Pelonggaran CSS Gaya Pentalan
Rancang fungsi pengaturan waktu CSS kubik-bezier() khusus dengan menyeret dua titik kontrol, pratinjau langsung terhadap referensi linier, lalu salin nilai yang sudah siap.
Hasil
Halaman ini membuka generator dengan x1=0.68, y1=-0.55, x2=0.265, y2=1.55 sudah dimuat — kurva overshoot yang diberi label oleh beberapa pustaka easing easeOutBack. Y1 negatif dan y2 di atas 1 adalah alasan mengapa pratinjau animasi di bawah mundur melewati awal dan melewati akhir sebelum diselesaikan; seret salah satu pegangan atau edit angkanya untuk membuat efeknya lebih kuat atau lebih lembut.
Jujurlah tentang hal ini: satu kurva kubik-bezier() hanya memiliki dua titik kontrol, sehingga dapat memperkirakan satu gerakan overshoot-and-settle, bukan pantulan fisik multi-pantulan asli dengan beberapa lompatan yang semakin berkurang. Untuk efek pantulan bola secara literal, Anda memerlukan beberapa bingkai utama atau segmen langkah () yang dirangkai menjadi satu — kurva ini adalah kurva terdekat yang dapat diperoleh fungsi pengaturan waktu transisi dalam satu baris.
Overshoot tunggal tersebut masih merupakan hal yang diinginkan oleh sebagian besar UI yang goyang: sebuah tombol yang muncul sedikit melebihi ukuran istirahatnya, sebuah modal yang melampaui batas sebelum menetap, sebuah kartu yang muncul pada tempatnya. Salin nilai apa adanya agar terasa tajam, atau haluskan y1 ke arah 0 dan y2 ke arah 1 untuk memutar kembali overshoot.