CSS Cubic Bezier Düzenleyici
CSS hız eğrilerini sürüklenebilir kontrol noktaları ve canlı önizleme ile düzenleyin
Noktaları sürükleyin ya da Tab ile birini seçip yön tuşlarıyla kaydırın; Shift tuşu adımı on kat büyütür.
CSS Cubic Bezier Düzenleyici hakkında
CSS ease değeri aslında cubic-bezier(0.25, 0.1, 0.25, 1) demektir ve sürenin tam yarısında mesafenin yüzde 80 kadarını çoktan almış olur. Eğrinin iki ucu (0,0) ve (1,1) noktalarına sabitlenmiştir, yalnızca iki kontrol noktası sizin elinizdedir. x değeri 0 ile 1 arasında kalmak zorundadır, yoksa tarayıcı kuralın tamamını geçersiz sayıp atar; y ise bu aralığın dışına çıkıp taşma etkisi üretebilir.
CSS Cubic Bezier Düzenleyici nasıl kullanılır
- 1
Izgara üzerindeki turkuaz ve mor kontrol noktalarını sürükleyin ya da Tab ile birini seçip yön tuşlarıyla kaydırın.
- 2
Veya açılır listeden hazır bir eğri seçin: linear, ease, easeOutBack, material-standard ve diğerleri.
- 3
Mevcut bir eğriyi yüklemek için cubic-bezier() değerini içe aktarma kutusuna yapıştırıp Uygula düğmesine basın; Ters çevir düğmesi eğrinin tersini üretir.
- 4
Hareket, ilerleme çubuğu ve solma şeritlerini izleyin ve süre kaydırıcısını gerçek animasyonunuzun süresine ayarlayın.
- 5
Örnekleyici kaydırıcısıyla herhangi bir noktadaki f(x) değerini okuyun, ardından cubic-bezier() değerini veya tam CSS parçasını kopyalayın.
Sıkça sorulan sorular
y serbestken x neden yalnızca 0 ile 1 arasında olabiliyor?
Çünkü x zamandır. x bu aralığın dışına çıksaydı eğri kendi üzerine katlanır ve tek bir an iki farklı ilerleme değerine karşılık gelirdi. Bu yüzden standart x1 ve x2 değerlerini 0–1 aralığıyla sınırlar ve tarayıcılar bunun dışındaki bildirimi geçersiz sayıp tamamen atar. y için böyle bir sınır yoktur: 1 üzerindeki değerler hedefi aşar, 0 altındaki değerler ise başlamadan önce geri çeker. Bu araç da aynı nedenle x değerini sınırlar ve aralık dışı girdiyi reddeder.
ease-in-out gibi anahtar kelimeler farklı mı davranır?
Hayır, bunlar tamamen kısayoldur. Standart ease-in-out değerini tam olarak cubic-bezier(0.42, 0, 0.58, 1) diye tanımlar; aynı şekilde ease (0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1) ve linear (0, 0, 1, 1) demektir. İsimlerin arkasında gizli bir davranış yoktur.
Bununla zıplama veya yay efekti yapabilir miyim?
Hayır ve bu, aracın değil cubic-bezier fonksiyonunun sınırıdır. Kübik bir bezier her x değerini tam olarak bir kez keser ve en fazla bir kez taşabilir. Gerçek bir zıplama veya yay art arda salınım gerektirir; bunun için çok sayıda duraklı linear() fonksiyonu, keyframes veya JavaScript gerekir. Burada yapılabilecek en fazla şey easeOutBack gibi tek bir taşmadır, ki bu eğri x=0.573 dolayında y=1.0978 tepe değerine ulaşır.
Önizlemedeki içi boş mor halka ne işe yarar?
İçi dolu nokta, her karede eğriyi çözen kendi kodumuz tarafından konumlandırılır. İçi boş halkayı ise doğrudan üretilen değerden yola çıkarak tarayıcının CSS motoru hareket ettirir. Örneklememiz doğruysa ikisi üst üste biner, yani halka matematiğin canlı bir doğruluk testidir. Küçük bir kayma yalnızca geçiş bir kare geç başladığında veya tarayıcı arka plandaki sekmeyi yavaşlattığında görünür.