Cubic bezier düzenleyici
Tamamen tarayıcınızda çalışır. Dosyalarınız ve verileriniz cihazınızdan hiç çıkmaz.
Bu araç hakkında
Eğri üzerindeki iki kontrol noktasını sürükleyerek kendi yumuşatmanızı (easing) şekillendirin, ya da ease-in-out gibi bir hazır ayardan başlayıp oradan değiştirin. Dört sayı alanı tutamaçlarla senkronize kalır, yani değerlerde elle ya da gözle ince ayar yapabilirsiniz. Önizleme animasyonu, yumuşatmanızı doğrusal bir referansla yan yana oynatır, böylece eğrinin hareketi sabit bir hıza kıyasla ne kadar hızlandırıp yavaşlattığını görmek kolaylaşır.
Eğri düzenleyici nasıl çalışır?
Bir CSS cubic-bezier() yumuşatması, (x1, y1) ve (x2, y2) olmak üzere iki kontrol noktasıyla tanımlanır; eğrinin başlangıcı ve bitişi (0,0) ve (1,1) noktalarında sabittir. x koordinatları zamanı temsil eder ve her zaman CSS’in gerektirdiği 0-1 aralığına sıkıştırılır, ancak ilerlemeyi temsil eden y koordinatlarının bu düzenleyicide o aralığın dışına çıkmasına izin verilir (kabaca -1 ile 2 arası). Bu sayede yerleşik ease-in-back ve ease-out-back hazır ayarlarında olduğu gibi, hareketin hedefinin ötesine sıçrayıp sonra yerine oturduğu bir taşma (overshoot) efekti tasarlayabilirsiniz. Perde arkasında araç, eğriyi tıpkı bir tarayıcının yaptığı gibi değerlendirir: belirli bir an için eğri üzerindeki karşılık gelen noktayı birkaç tur Newton yöntemiyle bulur, eğri Newton’un hızlıca yakınsayamayacağı kadar düzse basit ikiye bölme yöntemine döner.
Değer alanlarına doğrudan bir cubic-bezier(...) değeri de yapıştırabilirsiniz; x değerleri geçerli 0-1 aralığındaysa araç bunu tekrar sürüklenebilir tutamaçlara çevirir.
Çizdiğim bir şey bir yere yükleniyor mu?
Hayır. Eğri düzenleyici, arkasındaki matematik ve önizleme animasyonunun tamamı tarayıcınızda çalışır. Çizdiğiniz hiçbir şey hiçbir yere yüklenmez, sürecin hiçbir aşamasında sunucu yoktur.
CSS geçişlerini ve animasyonlarını ince ayarlamak için kullanın: bir buton tıklaması için keskin bir ease-out, bir modal girişi için zıplayan bir taşma efekti, ya da bir tasarım aracının hareket spesifikasyonuna uyan özel bir eğri. Tamamlanan cubic-bezier() değerini doğrudan stil sayfanıza kopyalayın. transition-timing-function ve animation-timing-function ile nasıl bir araya geldiği için MDN easing-function referansına, tam söz dizimi için cubic-bezier() fonksiyon referansına bakabilirsiniz.