Hemen Çıkma Stili CSS Yavaşlama Eğrisi
İki kontrol noktasını sürükleyerek özel bir CSS kübik-bezier() zamanlama işlevi tasarlayın, doğrusal bir referansa göre canlı olarak önizleyin ve ardından hazır değeri kopyalayın.
Sonuç
Bu sayfa, oluşturucuyu x1=0,68, y1=-0,55, x2=0,265, y2=1,55 önceden yüklenmiş halde açar - bazı hareket hızı kitaplıkları easyOutBack olarak etiketlenen bir aşma eğrisidir. Negatif y1 ve 1'in üzerindeki y2, tam olarak aşağıdaki animasyon önizlemesinin yerleşmeden önce başlangıcından ve bitişinden geri çekilmesinin nedenidir; Efekti daha güçlü veya daha yumuşak hale getirmek için tutamacı sürükleyin veya sayıları düzenleyin.
Bunun ne olduğu konusunda dürüst olmak gerekirse: tek bir kübik-bezier() eğrisinin yalnızca iki kontrol noktası vardır, bu nedenle birkaç azalan atlama ile gerçek bir çoklu sıçrama fiziksel sıçraması değil, bir aşma ve yerleşme hareketine yaklaşık olarak yaklaşabilir. Gerçek bir top sıçrama efekti için birbirine zincirlenmiş birden fazla ana kareye veyastep() segmentine ihtiyacınız olacaktır; bu eğri, düz bir geçiş zamanlama fonksiyonunun tek bir satırda alabileceği en yakın eğridir.
Bu tek aşma hala tam olarak çoğu sıçrayan kullanıcı arayüzünün istediği şeydir: dinlenme boyutunun biraz ötesine geçen bir düğme, yerleşmeden önce aşan bir model, yerine oturan bir kart. Hızlı bir his için değeri olduğu gibi kopyalayın veya aşımı geri çevirmek için y1'i 0'a doğru ve y2'yi 1'e doğru yumuşatın.