cubic-bezier eğrileri
Eğri — gerçekten okunabilen bir tablo olarak.
Örnekler girdiyi ve ayarları geçici olarak değiştirir. Önceki çalışmanızı geri yükleyebilirsiniz.
0 karakter
- eğri
- 0
Çıktı
0.42, 0, 0.58, 1 gibi dört sayı girin veya hazır bir eğri seçin.
Dosyalarınız cihazınızda kalır
Bu araç tamamen tarayıcınızda çalışır. Yapıştırdığınız içerik cihazınızda işlenir ve asla bir sunucuya gönderilmez; bu yüzden token'lar, anahtarlar ve yayımlanmamış metinlerle güvenle kullanabilirsiniz.
Örnek
Uygulamalı örnek — cubic-bezier eğrileri
Adlandırılmış bir eğri seçin ya da dört sayı yazın. Aşağıdaki girdileri ve ayarları kullanın. Diğer ayarları sayfanın varsayılan değerlerinde bırakın.
| Öğe | Değer |
|---|---|
| Girdi | 0.25, 0.1, 0.25, 1 |
| Çıktı 1 | cubic-bezier(0.25, 0.1, 0.25, 1) |
| Çıktı 2 | 300 ms → 80.2% |
| Çıktı 3 | 600 ms → 100% |
Bu dört değer ease eğrisini tanımlar. 600 ms süren animasyonun 300 ms noktasında ilerleme yaklaşık %80,2 olur.
Nasıl çalışır
- Adlandırılmış bir eğri seçin ya da dört sayı yazın.
- Tabloyu okuyun: sürenin her onda birinde hareketin ne kadarı bitmiş.
- Süreyi gerçekten canlandırdığınız süreye ayarlayın ki milisaniyeler bir anlam taşısın.
- Zamanlama işlevini kopyalayın.
Sık sorulan sorular
- Neden çizilmiş bir eğri yerine tablo?
- Çünkü soru neredeyse her zaman “başta fazla mı yavaş” ya da “sona fazla mı sert varıyor” olur; zamana karşı ilerleme tablosu tam da buna yanıt verir. Çizilmiş eğri güzel görünür ve milisaniyeleri yine tahmin etmenizi bırakır.
- Dört sayı ne anlama geliyor?
- İki denetim noktası: x1, y1, x2, y2. x değerleri zamandır ve 0 ile 1 arasında olmalıdır. y değerleri ilerlemedir ve bu aralığın dışına çıkabilir — bir eğrinin hedefi aşıp geri yaylanmasını sağlayan tam da budur.
- Hangisini kullanmalıyım?
- Ekrana giren bir şey için ease-out: başta hızlı, sonda yerine oturan. Çıkan bir şey için ease-in. İki konum arasındaki bir hareket için ease-in-out. Doğrusal ise bir yükleniyor göstergesi için ve neredeyse başka hiçbir şey için.
- back eğrisi nedir?
- Hedefini aşıp geri dönen eğri — bir iletişim kutusuna fiziksellik katan o küçük sekme. Küçük ve hızlı hareketlerde kullanın; büyük bir harekette hata gibi okunur.
- Bir sunucuya bir şey gönderiliyor mu?
- Hayır. Tarayıcıda çalışır; yazdığınız şey bilgisayarınızda kalır.