⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Kurva Pelonggaran Standar Desain Material

Rancang fungsi pengaturan waktu CSS kubik-bezier() khusus dengan menyeret dua titik kontrol, pratinjau langsung terhadap referensi linier, lalu salin nilai yang sudah siap.

Seret gagang oranye (P1) dan gagang merah (P2) untuk membentuk ulang kurva — tombol panah juga berfungsi. X tetap berada di antara 0 dan 1 sesuai kebutuhan CSS; seret pegangan ke atas atau ke bawah kotak untuk mengirim y melewati rentang tersebut untuk efek overshoot dan pantulan.

Kurva Anda

Linier (untuk perbandingan)

Memproses... 0%

Hasil

Halaman ini membuka generator dengan x1=0.4, y1=0, x2=0.2, y2=1 sudah dimuat — kurva pelonggaran standar yang diterbitkan dalam pedoman gerakan Desain Material Google. Seret pegangan atau edit angka, dan kurva, pratinjau langsung, dan pembaruan CSS yang dapat disalin secara bersamaan.

Desain Material menyebut kurva ini sebagai "pelonggaran standar" dan merekomendasikannya untuk sebagian besar transisi di layar — elemen yang sudah terlihat dan mudah dipindahkan, diubah ukurannya, atau memudar dalam layar yang sama. Bentuknya berakselerasi dengan cepat, lalu melambat perlahan pada tempatnya, itulah sebabnya begitu banyak aplikasi Android dan UI web bergaya Material berbagi nuansa transisi yang sama tanpa ada yang menyadari bahwa mereka menggunakan empat angka yang sama.

Letakkan langsung ke dalam fungsi pengaturan waktu transisi atau fungsi pengaturan waktu animasi untuk kesan yang konsisten dengan Material, atau gunakan sebagai titik referensi: Pedoman Material juga menentukan kurva "perlambatan" dan "percepatan" yang terpisah untuk elemen yang masuk atau keluar dari layar, yang tidak dimaksudkan untuk digantikan oleh kurva standar tunggal ini.

🛡️
Dieksekusi di Browser

File dan masukan Anda tidak pernah keluar dari perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Editor kurva SVG yang dapat diseret dengan dua pegangan (P1 dan P2) ditambah input angka x1/y1/x2/y2 yang dapat diedit untuk nilai presisi piksel.
  • Pratinjau animasi perulangan membandingkan pengaturan waktu kubik-bezier() khusus Anda dengan bola referensi linier, sehingga Anda dapat melihat easingnya, bukan hanya membacanya.
  • String kubik-bezier(x1, y1, x2, y2) yang dapat disalin siap untuk fungsi pengaturan waktu transisi atau fungsi pengaturan waktu animasi, ditambah halaman yang telah ditetapkan untuk kemudahan masuk, pantulan, dan kurva standar Desain Material.

Manfaat Utama

✓ Seret pengendali titik kontrol dan lihat kurva, pratinjau animasi langsung, dan string CSS yang dapat disalin semuanya diperbarui secara bersamaan — tidak perlu menghafal matematika koordinat.
✓ Y dapat melampaui 0 dan 1 untuk efek pegas dan pantulan sementara X tetap berada pada rentang 0–1 yang sebenarnya dibutuhkan CSS, sehingga setiap nilai yang Anda salin valid saat Anda menempelkannya.
✓ Pratinjau berdampingan membandingkan kurva khusus Anda dengan referensi linier biasa sehingga perbedaan dalam kesan gerakan — seluruh alasan untuk menggunakan pelonggaran — sekilas terlihat jelas, bukan hanya keluaran kode.

Kasus Penggunaan

  • • Apakah Anda memerlukan nilai fungsi waktu transisi atau fungsi waktu animasi CSS khusus, bukan salah satu kata kunci kemudahan bawaan?
  • • Apakah Anda ingin melihat dengan tepat seperti apa kubik-bezier(0.42, 0, 0.58, 1) — bilangan real di balik kata kunci ease-in-out milik CSS — yang bergerak sebelum Anda mengirimkannya?
  • • Apakah Anda membuat animasi tombol, modal, atau kartu yang melenting dan memerlukan kurva easing overshoot yang siap disalin langsung ke stylesheet Anda?