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ığı yumuşatma fonksiyonları için ücretsiz görsel bir düzenleyicidir ve ön uç geliştiricileri ile hareket tasarımcıları için yapılmıştır. cubic-bezier modunda iki kontrol noktasını sürükleyerek (ya da yazarak) bir eğri oluşturursunuz: x değerleri yasal 0–1 aralığında kalırken, y değerleri overshoot ve anticipation oluşturmak için 1'in üzerine çıkabilir veya 0'ın altına inebilir. Bir steps() modu, ayarlanabilir bir adım sayısı ve bir sıçrama terimiyle kademeli zamanlamayı kapsar — jump-start, jump-end, jump-none veya jump-both; burada step-start ve step-end, steps(1, …) demektir. Canlı animasyon önizlemesi, belirlediğiniz bir süre boyunca hareket edip ölçeklenen bir kutu üzerinde geçerli yumuşatmayı oynatır, karşılaştırmak için herhangi bir hazır ayarı hayalet eğri olarak bindirebilir ve mevcut bir cubic-bezier() ya da steps() dizesini içe aktarabilirsiniz. Tam bildirimi transition-timing-function veya animation-timing-function alanınıza kopyalayın.

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

1. Üstten cubic-bezier() veya steps() modunu seçin ya da Ayarları açıp ease, ease-in-out veya linear gibi bir hazır ayardan başlayın.
2. cubic-bezier modunda grafikteki iki tutamacı sürükleyin veya x1, y1, x2 ve y2 için tam değerler yazın; overshoot için y'yi 1'in üzerine itin.
3. steps() modunda adım sayısını belirleyin ve merdiveni çizmek için bir sıçrama terimi (jump-start, jump-end, jump-none veya jump-both) seçin.
4. Hareket edip ölçeklenen kutuda canlı animasyonu çalıştırmak için Oynat'a basın ve zamanlamayı hissetmek için süreyi saniye cinsinden ayarlayın.
5. Ayarlarda bir karşılaştırma eğrisi seçerek bir hazır ayarı aynı grafikte hayalet olarak bindirin ya da İçe Aktar'a bir değer yapıştırıp uygulayın.
6. Üretilen cubic-bezier() veya steps() değerini transition-timing-function ya da animation-timing-function alanınıza kopyalayın.

Örnekler

x1 0.25, y1 0.1, x2 0.25, y2 1

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

x1 0.34, y1 1.56, x2 0.64, y2 1

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

steps modu, N 4, jump-end

steps(4, jump-end)

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.

steps() modu ne işe yarar?

steps(), yumuşakça ara değer üretmek yerine sabit sayıda değer arasında sıçrar — sprite animasyonları, tıklayan sayaçlar veya kare kare efektler için kullanışlıdır. Adım sayısını ve bir sıçrama terimini ayarlayın: jump-start, jump-end, jump-none veya jump-both. step-start, steps(1, jump-start) ile; step-end ise steps(1, jump-end) ile aynıdır.

Canlı animasyon önizlemesi nasıl çalışır?

Oynat'a basın; kutu geçerli yumuşatmanızı kullanarak parkur boyunca hareket eder ve ölçeklenir, ileri geri tekrarlar. Yavaşlatmak veya hızlandırmak için süreyi saniye cinsinden değiştirin; saf CSS animasyonu kullanır ve cubic-bezier() ya da steps() değerinizi zamanlama fonksiyonu olarak alır.

Mevcut bir yumuşatma değerini içe aktarabilir miyim?

Evet. Bir cubic-bezier(...) veya steps(...) değerini — ya da ease-in-out, step-start veya step-end gibi bir anahtar sözcüğü — İçe Aktar alanına yapıştırıp uygulayın; düzenleyici bunu tekrar kontrol noktalarına veya adım ayarlarına çözümler.

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.