Geçiş Fonksiyonları Hızlı Başvuru
Geçiş Fonksiyonları bir parametrenin zaman çizelgesinde değişim oranını kontrol eder.
Gerçek hayatta objeler hareket etmeye birden başlayıp durmazlar ve neredeyse hiçbir zaman sabit hızda ilerlemezler. Bir çekmeceyi açarken önce hızlıca çekeriz ve açıldıkça yavaşlatırız. Yere bir şey attığınızda önce aşağı doğru hızlanır ve sonra yere çarparak seker.
Bu site size doğru geçiş fonksiyonunu seçmenizde yardımcı olur.
Açık kaynak
Siteyi dilinize çevirmeye yardımcı olun.
x
t
CSS
CSS içindeki `transition` ve `animation` değerleri geçiş fonksiyonunu seçmenizi sağlar.
.block { transition: transform 0.6s ; }
cubic-bezier.com sitesinde düzenle.
CSS içinde, bu fonksiyon
@keyframes kullanılarak uygulanabilir.:Boyut
Yükleniyor...
Pozisyon
Yükleniyor...
Şeffaflık
Yükleniyor...
PostCSS
PostCSS'de, hareket hızı işlevini tanımlamak çok daha kolaydır. Bu siteden geçiş bilgilerini alan bir postcss-easings eklentisi vardır.
.block { transition: transform 0.6s ; }
Bu beyan, yukarıda anlatılana dönüştürülür.
Maalesef, hareket hızı işlevi herhangi bir PostCSS eklentisiyle ayarlanamaz.
@Keyframes ile yapılabilir, yukarıya bakın.Geçiş
postcss-easing-gradients kullanarak bir geçiş çizmek mümkündür.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
Matematik fonksiyonu
Aşağıda bu hareket hızı işlevinin TypeScript ile yazılmış kodunu görüyorsunuz. X değişkeni, animasyonun mutlak ilerlemesini temsil eder 0 (animasyonun başlangıcı) ve 1 (animasyonun sonu) sınırlarında.
function (x: number): number {
}Aşağıda bu hareket hızı işlevinin TypeScript ile yazılmış kodunu görüyorsunuz. X değişkeni, animasyonun mutlak ilerlemesini temsil eder 0 (animasyonun başlangıcı) ve 1 (animasyonun sonu) sınırlarında.
function (x: number): number {
}Değişiklikler için geçişi kontrol edin:
Bu fonksiyon:
Bu fonksiyon
Doğrusal fonksiyon:
Doğrusal fonksiyon