Önemli noktalar
- 01İki kontrol noktası tutacını, sayısal değerleri tahmin etmek yerine yumuşatma eğrisini görsel olarak oymak için sürükleyin.
- 02Canlı top animasyonu zamanlamayı geri oynatır, böylece buna taahhüt etmeden önce hareketi hissediniz.
- 03Beş CSS dahili önceden ayar (ease, linear, ease-in, ease-out, ease-in-out) başlangıç noktaları olarak mevcuttur.
- 04Kübik-bezier() değeri iki ondalık kesinlikle canlı güncellemeler, herhangi bir CSS özelliğine yapıştırmaya hazır.
Neden Özel Yumuşatma Eğrileri UI Hareket İçin Önemlidir
CSS'nin dahili zamanlaması işlevleri — ease, ease-in-out, linear — çok yer kaplar, ama her UI'nin varsayılan hissettiğinde yanlış olduğu anlar vardır. Çok çabuk görünen bir alet, açılırken aşan bir modal, mekanik hissettiren bir ilerleme çubuğu. Kübik-bezier eğrileri, hareketi mekanik yerine doğal hissettirecek şekilde zamanlamayı ayarlamanıza izin verir, ama kübik-bezier'deki dört numara (0.4, 0, 0.2, 1) doğrudan akıl yürütmeye yakın imkansızdır.
Handytool'un kübik-bezier editörü bu sayıları iki sürüklenebilir tutaçlı görsel eğriye dönüştürür. Tutacı hareket ettirin ve top animasyonu hemen geri oynatılır, bu nedenle hareket niyetinize kadar hissetmeye göre tekrarlayabilirsiniz. Ardından değeri kopyalayın ve CSS'ye bırakın — bitti.
CSS Yumuşatma Eğrisi Nasıl Tasarlanır
- 01
Bir önceden ayar başlayın
Ease, linear, ease-in, ease-out veya ease-in-out temel olarak seçin. Tutaçlar her önceden ayar için doğru konumlara yaslanır.
- 02
Kontrol noktası tutacını sürükleyin
Her tutaç eğrinin bir ucunu kontrol eder — başlangıç tutacı ilk hızlanmayı şekillendirir, bitiş tutacı son yavaşlamayı şekillendirir. Tutacı hareket ettirmek önceden ayarı otomatik olarak 'özel'e geçir.
- 03
Top animasyonunu izleyin
Top, eğrinizi kullanarak soldan sağa canlandırılır. Yavaş vs hızlı geçişleri önizlemek için süre kaydırıcı ayarlayın.
- 04
Aşma deneyimi yapın
Y ekseni tutacını 1'in üzerine veya 0'ın altına sürükleyin, aşma ve undershoot oluşturmak — menü kararlı açılması gibi 'zıplayan' etki.
- 05
CSS değerini kopyalayın
Kübik-bezier() dizgesini almak ve stil sayfanızda geçişi zamanlaması işlevine yapıştırmak için kopyala'ya tıklayın.
Tamamen Tarayıcınızda Çalışır
Editör kendi içinde bir tarayıcı aracıdır — sayfa açıldıktan sonra yazı tipi, komut dosyası ve veri yüklenmez. Tutaçları sürükleme ve animasyonları önizleme çevrimdışı çalışır. Ön izleme topu için kullanılan kübik-bezier formülü, tarayıcıların CSS geçişleri için kullandığı formül ile aynıdır, bu nedenle editörde gördüğünüz stil sayfasında tam olarak ne üretileceğini gördüğünüzdür.
Yükleme yoktur ve kayıt yoktur. Çıktı tek bir CSS değeridir — yapıştırın ve bitti.
Kübik-Bezier Editörü SSS
Kübik-bezier yumuşatma eğrisi nedir?
Bir CSS geçişini veya animasyonu nasıl zaman içinde hızlandırdığını belirleyen iki kontrol noktası tarafından tanımlanan matematiksel eğridir. Kübik-bezier'deki dört sayı (x1, y1, x2, y2) bu kontrol noktalarının konumlarını ayarlar.
Neden Y değerleri 1 üzerinde veya 0 altında gidebilir?
0-1 dışında Y değerleri aşma ve undershoot — eğri bitiş noktasının geçmesi ve yerleşmesi. Bu 'zıplayan' yumuşatma eğrileri oluşturur. X değerleri 0-1'de kalmalıdır.
Çıktıyı nasıl kullanırım?
Kübik-bezier(...) dizgesini kopyalayın ve herhangi bir CSS geçişi zamanlaması işlevine veya animasyon zamanlaması işlevine yapıştırın. Her modern tarayıcıda çalışır.
Ease-in-out aslında ne demek?
Yavaş başlar, ortada hızlandırır ve sonunda yavaşlar — kübik-bezier(0.42, 0, 0.58, 1). Gerçek nesneleri nasıl hızlandırdığını ve yavaşladığını yansıtır ve çoğu cilalı UI hareketi için varsayılan seçimdir.
Top animasyon önizlemesi CSS'ye doğru mu?
Evet — önizleme tarayıcıların CSS geçişlerine uyguladığı aynı kübik bezier formülünü kullanır. Süre kaydırıcı buna taahhüt etmeden önce yavaş vs hızlı eğrileri hissetmenize izin verir.