Editor Cubic-Bezier

Cara menggunakan editor cubic-bezier

1. Seret dua penanda pada grafik. P1 (titik kontrol pertama) membentuk awal gerakan, P2 bagian akhirnya. Waktu berjalan dari kiri ke kanan dan progres dari bawah ke atas.
2. Atau ketik nilai di Nilai cubic-bezier(): cubic-bezier(0.4, 0, 0.2, 1) lengkap, empat angka, atau kata kunci seperti ease-in-out. Kolom x1, y1, x2, dan y2 mengedit satu koordinat dalam satu waktu.
3. Mulai dari menu Preset (kata kunci CSS, keluarga sine sampai back, dan kurva Material Design) atau tombol kata kunci. Jika kurva Anda sama dengan sebuah preset, namanya ditampilkan di samping tombol.
4. Perhatikan Pratinjau animasi: titik pada Kurva Anda dan titik pada linear menempuh jarak yang sama dalam Durasi yang sama. Gunakan Jeda/Putar dan Mulai ulang untuk membandingkannya.
5. Salin hasilnya dari Fungsi timing CSS, atau salin Perkiraan linear() dan pilih jumlah Segmen-nya.

Keyboard: fokuskan sebuah penanda dan gunakan tombol panah untuk menggesernya 0,01, atau 0,1 dengan Shift.

Jika sistem Anda diatur untuk mengurangi gerakan, animasi dimulai dalam keadaan dijeda. Tekan Putar jika Anda tetap ingin menjalankannya.

Arti cubic-bezier()

Fungsi easing CSS memetakan waktu yang telah berlalu dari sebuah transisi (0 sampai 1) ke progresnya (0 sampai 1). cubic-bezier(x1, y1, x2, y2) menggambarkan pemetaan ini dengan kurva Bézier kubik yang dimulai di (0, 0), berakhir di (1, 1), dan ditarik oleh dua titik kontrol, P1 = (x1, y1) dan P2 = (x2, y2).

• Nilai x adalah waktu dan harus tetap di antara 0 dan 1; jika tidak, fungsi tersebut bukan kurva timing yang valid. Editor ini menjaga nilainya tetap dalam rentang.
• Nilai y adalah progres dan boleh di bawah 0 atau di atas 1. Nilai y di atas 1 membuat animasi melampaui targetnya lalu kembali, seperti kurva Back; di bawah 0, animasi bergerak mundur terlebih dahulu.
• Kemiringan yang curam berarti gerakan cepat, kemiringan yang landai berarti gerakan lambat. ease-out dimulai cepat dan berakhir lambat, terasa alami untuk elemen yang masuk ke layar. ease-in kebalikannya dan cocok untuk elemen yang keluar.

Kata kunci CSS adalah pintasan: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), dan linear = (0, 0, 1, 1).

Perkiraan linear()

Fungsi linear() yang lebih baru mencantumkan nilai progres pada waktu yang berjarak sama, misalnya linear(0, 0.25, 0.5, 0.75, 1), lalu menghubungkannya dengan garis lurus. Alat ini mengambil sampel dari kurva Anda (menyelesaikan persamaan Bézier untuk setiap langkah waktu) dan menulis nilainya dengan tiga desimal. Dengan 20 sampai 40 segmen, hasilnya secara visual identik dengan kurvanya. Manfaat utama linear() adalah untuk kurva yang tidak bisa digambar dengan Bézier, seperti pantulan dan pegas, tetapi fungsi ini juga memungkinkan Anda memakai satu sintaks untuk semuanya. Fungsi ini berjalan di Chrome dan Edge 113+, Firefox 112+, dan Safari 17.2+, jadi tetap simpan nilai cubic-bezier() sebagai cadangan.