CSS Cubic-Bezier Oluşturucu

CSS Cubic-Bezier Oluşturucu nedir?

CSS Cubic-Bezier Oluşturucu, CSS geçişleri ve animasyonlarının kullandığı cubic-bezier() zamanlama fonksiyonu için ücretsiz görsel bir düzenleyicidir ve ön uç geliştiricileri ile hareket tasarımcıları için yapılmıştır. ease, linear, ease-in, ease-out veya ease-in-out gibi bir hazır ayar seçin ya da iki kontrol noktasını kendiniz ince ayarlayın: x değerleri yasal 0–1 aralığına sınırlanırken, y değerleri overshoot ve anticipation oluşturmak için 1'in üzerine çıkabilir veya 0'ın altına inebilir. Önizleme, eğriyi bir birim kare üzerine çizer; böylece hızlanmayı ve yavaşlamayı bir bakışta okuyabilirsiniz ve kopyalamanız için tam cubic-bezier(x1, y1, x2, y2) bildirimi üretilir. Yerleşik bir anahtar sözcük fazla genel geldiğinde ve daha çevik, daha esnek veya daha ölçülü bir hareket istediğinizde kullanın.

CSS Cubic-Bezier Oluşturucu nasıl kullanılır

1. Ayarları açın ve kontrol noktalarını başlatmak için bir başlangıç hazır ayarı seçin — ease, linear, ease-in, ease-out veya ease-in-out.
2. Yumuşatmayı yeniden biçimlendirmek için eğri önizlemesindeki iki yuvarlak tutamacı sürükleyin ya da x1, y1, x2 ve y2 alanlarına tam değerler yazın.
3. x1 ve x2'yi 0 ile 1 arasında tutun; harekete overshoot veya anticipation eklemek için y1 ya da y2'yi 1'in üzerine veya 0'ın altına itin.
4. Yumuşatmanın nasıl hızlanıp yavaşladığını değerlendirmek için eğriyi kesik çizgili linear temel çizgisine göre okuyun.
5. Üretilen cubic-bezier() değerini kopyalayın ve transition-timing-function ya da animation-timing-function alanınıza yapıştırın.

Örnekler

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

Sıkça sorulan sorular

cubic-bezier'in dört sayısı ne anlama gelir?

Bunlar iki kontrol noktasının koordinatlarıdır: ilk nokta için x1, y1 ve ikinci nokta için x2, y2. Eğri her zaman (0,0) noktasından başlar ve (1,1) noktasında biter; kontrol noktaları onu aradaki bölümde büker ve bu da animasyonlu özelliğin zaman içinde nasıl hızlanıp yavaşladığını belirler.

x1 veya x2'yi neden 1'in üzerine ayarlayamıyorum?

CSS spesifikasyonu, zamanlama fonksiyonunun ilerlemeden çıktıya geçerli bir eşleme olarak kalması için her iki kontrol noktasının x (zaman) koordinatlarının 0 ile 1 arasında kalmasını gerektirir. Bu araç, x alanlarını ve sürükleme tutamaçlarını otomatik olarak bu aralığa sınırlar. y değerleri ise overshoot veya anticipation oluşturmak için 1'i aşabilir ya da 0'ın altına inebilir.

Zıplayan veya esnek bir yumuşatma nasıl yaparım?

y değerlerinden birini 1'in üzerine (sonda overshoot için) veya 0'ın altına (başta anticipation için) itin. Örneğin cubic-bezier(0.34, 1.56, 0.64, 1) yerine oturmadan önce hedefi aşar ve hiç JavaScript olmadan yay benzeri bir his verir.

Üretilen değeri nerede kullanırım?

Onu transition-timing-function veya animation-timing-function değeri olarak yapıştırın — örneğin transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease veya ease-in-out gibi anahtar sözcükleri kendi özel eğrinizle değiştirir.

Verilerim bir sunucuya gönderiliyor mu?

Hayır. Düzenleyicinin tamamı tarayıcınızda JavaScript ile çalışır — kontrol noktaları ve eğri yerel olarak hesaplanır ve asla yüklenmez, böylece gizli biçimde ve sayfa bir kez yüklendikten sonra çevrimdışı bile çalışır.