linear() yumuşak geçiş işleviyle CSS'de karmaşık animasyon eğrileri oluşturma

CSS'deki yumuşak geçiş işlevi, noktaları arasında doğrusal olarak etkileşim kuran linear() ile tanışın. Bu işlev, hemen çıkma ve ilkbahar efektlerini yeniden oluşturmanıza olanak tanır.

CSS'deki yumuşak geçişler

CSS'de öğeleri canlandırırken veya geçiş yaparken, animation-timing-function ve transition-timing-function özelliklerini kullanarak bir değerin yumuşak geçiş işleviyle değişme hızını kontrol edersiniz.

CSS'de hazır ayar olarak kullanılabilecek birkaç anahtar kelime vardır: linear, ease, ease-in, ease-out ve ease-in-out. Kendi yumuşak geçiş eğrilerinizi oluşturmak için cubic-bezier() işlevini kullanın veya steps() yumuşak geçiş işlevini kullanarak adım tabanlı bir yaklaşım uygulayın.

Yumuşak geçişler uygun şekilde kullanıldığında, animasyonlu öğeye hız kazandırıyormuş gibi bir ağırlık hissi verir.

Hemen çıkma veya ilkbahar efektleri gibi karmaşık eğriler oluşturmak CSS'de mümkün değildir, ancak linear() sayesinde artık bu eğrileri şaşırtıcı derecede iyi tahmin edebilirsiniz.

linear() tanıtımı

CSS'de yumuşatma tanımlamanın yeni bir yolu linear() kullanmaktır. Bu işlev, virgülle ayrılmış durak sayısını kabul eder. Her durak 0 ile 1 arasında değişen tek bir sayıdır. Her durak arasında interpolasyon, fonksiyonun adı açıklanarak doğrusal bir şekilde gerçekleştirilir.

animation-timing-function: linear(0, 0.25, 1);

Bu duraklar varsayılan olarak eşit mesafeye yayılır. Önceki snippet'te bu, 0.25 çıkış değerinin% 50 işaretinde kullanılacağı anlamına gelir.

Görselleştirilmiş olarak, linear(0, 0.25, 1) grafiği şu şekilde görünür:

Durakların eşit mesafede yayılmasını istemiyorsanız isteğe bağlı olarak bir durma süresi geçirebilirsiniz. Bir değeri durak uzunluğu olarak geçirirken başlangıç noktasını tanımlarsınız:

animation-timing-function: linear(0, 0.25 75%, 1);

Burada, 0.25 çıkış değeri 50% işaretinde değil, 75% için kullanılır.

Durak uzunluğu olarak iki değer belirtirken hem başlangıç hem de bitiş noktasını tanımlarsınız:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Zamanında% 25 ile% 75 arasında 0,25 çıkış değeri kullanılır.

linear() ile karmaşık eğriler oluşturma

Yukarıdaki örnekler çok basit yumuşatma örnekleridir. Ancak karmaşık yumuşak geçiş işlevlerini, hassasiyet kaybından ödün vermeden çok basit bir şekilde yeniden oluşturmak için linear() kullanabilirsiniz.

Doğrudan CSS'de ifade edilemeyen bir yumuşatma türü olan ve JavaScript kullanılarak tanımlanan bu hemen çıkma yumuşatma eğrisini ele alalım:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Kod size çok fazla bilgi vermese de görselleştirme yardımcı olabilir. Aşağıda, mavi eğri olarak görselleştirilmiş çıktıyı görebilirsiniz:

Eğri, üzerine durak sayısı eklenerek basitleştirilebilir. Burada her yeşil nokta bir durağı belirtir:

linear() işlevine geçirildiğinde sonuç, orijinale benzeyen ancak kenarlarda biraz daha pürüzlü olan bir eğri olur.

Yeşil animasyonlu kutuyu mavi kutuyla karşılaştırdığınızda pürüzsüz bir kutu olmadığını görebilirsiniz.

Ancak, yeterli sayıda durak eklerseniz, orijinal eğriyi oldukça iyi bir şekilde tahmin edebilirsiniz. Güncellenmiş sürümü aşağıda bulabilirsiniz:

Yalnızca aktarma sayısını iki katına çıkararak zaten sorunsuz bir sonuç almış olursunuz.

Animasyon için kullanılan kod aşağıdaki gibi görünür:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Yardımcı olabilecek bir araç

Bu durak listesini manuel olarak oluşturmak çok zahmetli olacaktır. Neyse ki Jake ve Adam, bir yumuşak geçiş eğrisini linear() eşdeğerine dönüştürmenize yardımcı olacak bir araç geliştirdi.

Araç, giriş olarak bir JavaScript yumuşak geçiş işlevini veya SVG eğrisini alır ve linear() kullanarak basitleştirilmiş eğriyi oluşturur. İstediğiniz durak sayısını ve bunların kesinliğini kontrol etmek için kaydırma çubuklarını kullanın.

Sağ üst taraftaki şu hazır ayarlardan birini de seçebilirsiniz: Bahar, Zıplama, Basit elastik veya Materyal Tasarım vurgulu yumuşak geçiş dahil.

Geliştirici Araçları desteği

Geliştirici Araçları'nda, linear() sonucunu görselleştirme ve düzenleme desteği vardır. Duraklarda sürüklemenize olanak tanıyan etkileşimli bir ipucunu görüntülemek için simgeyi tıklayın.

Geliştirici Araçları özelliği, Chrome 114 sürümü yüklü olan Geliştirici Araçları bölümünde kullanılabilir.

Fotoğrafçı: Howie Mapson Unsplash'te