Kübik Bezier Jeneratörü

Cubic-bezier(x1, y1, x2, y2)'yi elle yazmak ve hissi kontrol etmek için sayfayı yeniden yüklemek, bir animasyonu ayarlamanın yavaş bir yoludur. Bu oluşturucu bu döngüyü kapatır: eğri üzerindeki kontrol noktası tutamacını sürükleyin veya x1/y1/x2/y2 alanlarına tam sayıları yazın ve eğri, kopyalanabilir CSS dizisi ve canlı animasyonun önizlemesi her değişiklikte güncellenir; oluşturma adımı yok, yeniden yükleme yok.

İki eksen bilinçli olarak farklı çalışır. x1 ve x2, 0 ile 1 arasında sabit kalır, çünkü CSS spesifikasyonunun aslında bir kübik-bezier() zamanlama fonksiyonu için gerektirdiği şey budur - bu aralığın dışındaki bir değer kesinlikle geçersizdir. y1 ve y2'nin böyle bir sınırı yoktur: kutunun üst kısmının üstüne veya alt kısmının altına bir tutamacı sürüklediğinizde eğri, başlangıcını veya sonunu geçer; bu da tam olarak tek bir hareket hızı eğrisinden yay ve sıçrama tarzı efektlerin nasıl oluşturulduğuna benzer.

Bir sayıyı görmek, hareketi görmekle aynı şey değildir; bu nedenle önizleme, iki özdeş topu bir döngü üzerinde yan yana çalıştırır: biri özel eğrinizi kullanarak hareket eder, diğeri düz, sabit bir doğrusal hızda hareket eder. Onların yarışını izlemek, bir hareket eğrisinin gerçekten istediğiniz hissi üretip üretmediğini, daha bir stil sayfasına ulaşmadan anlamanın en hızlı yoludur. Önceden ayarlanmış sayfalar (CSS'nin kendi giriş kolaylığı anahtar sözcüğünün arkasındaki gerçek sayılar, bazılarının hemen çıkma olarak adlandırdığı dürüst bir aşma yaklaşımı ve Google'ın yayınlanmış Materyal Tasarımı standart eğrisi) boş kontrol noktaları yerine sürükleyebileceğiniz hazır başlangıç ​​noktalarıdır.

Her şey tarayıcınızda yerel olarak çalışır: yükleme yok, hesap yok, sunucu gidiş-dönüş yok ve sayfa yüklendikten sonra oluşturucu çevrimdışı çalışmaya devam ediyor.