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

linear() ile tanışın. Bu, CSS'de noktaları arasında doğrusal olarak enterpolasyon yapan ve sıçrama ile yay efektlerini yeniden oluşturmanıza olanak tanıyan bir yumuşatma işlevidir.

Bramus

CSS'de yumuşatma

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

CSS'de hazır ayar olarak kullanılabilen çeşitli anahtar kelimeler vardır. Bunlar linear, ease, ease-in, ease-out ve ease-in-out'dir. 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 adım ilerleyin.

Uygun şekilde kullanıldığında, yumuşatma işlevleri, animasyonlu bir öğeye hız kazanıyormuş gibi görünürken ağırlık hissi verir.

CSS'de sıçrama veya yay efektleri gibi karmaşık eğriler oluşturmak mümkün değildir ancak linear() sayesinde artık bunları şaşırtıcı derecede iyi bir şekilde yakalayabilirsiniz.

linear() ile ilgili giriş

CSS'de yumuşatma tanımlamanın yeni yolu linear() kullanmaktır. Bu işlev, virgülle ayrılmış bir dizi durak kabul eder. Her durak, 0 ile 1 arasında değişen tek bir sayıdır. Her durak arasında doğrusal bir şekilde enterpolasyon yapılır. Bu nedenle işleve bu ad verilmiştir.

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

Bu duraklar varsayılan olarak eşit aralıklarla yerleştirilir. Yukarıdaki snippet'te bu, 0.25 çıkış değerinin% 50 işaretinde kullanılacağı anlamına gelir.

linear(0, 0.25, 1) için grafik görselleştirildiğinde şu şekilde görünür:

Durakların eşit aralıklarla dağıtılmasını istemiyorsanız isteğe bağlı olarak bir durak uzunluğu iletebilirsiniz. Bir değeri durdurma uzunluğu olarak iletirken 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 kullanılmaz ancak 75% işaretinde kullanılır.

Durdurma 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ın% 25'inden% 75'ine kadar 0,25 çıkış değeri kullanılır.

Karmaşık eğriler oluşturma

Önceki örnekler daha basit yumuşatma işlevleri olsa da hassasiyetten ödün verirseniz karmaşık yumuşatma işlevlerini yeniden oluşturmak için linear() kullanabilirsiniz.

JavaScript kullanılarak tanımlanan ve doğrudan CSS'de ifade edilemeyen bir yumuşak geçiş türü olan bu sıçrama yumuşak geçiş 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 vermeyebilir ancak görselleştirme verebilir. Çıkış, mavi bir eğri olarak görselleştirilmiştir:

Eğriye bir dizi durak eklenerek basitleştirilebilir. Burada her yeşil nokta bir durağı gösterir:

linear() işlevine aktarıldığında sonuç, orijinal eğriye benzeyen ancak kenarları biraz daha pürüzlü olan bir eğri olur.

Yeşil animasyonlu kutuyu mavi kutuyla karşılaştırdığınızda, yeşil kutunun o kadar akıcı olmadığını görebilirsiniz.

Ancak yeterli sayıda durak eklerseniz orijinal eğriyi oldukça iyi bir şekilde yakalayabilirsiniz. Güncellenmiş versiyonu aşağıda bulabilirsiniz:

Durak sayısını ikiye katlayarak bile sorunsuz bir sonuç elde edebilirsiniz.

Animasyon için kullanılan kod şu şekilde 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ı bir araç

Bu durak listesini manuel olarak oluşturmak çok zahmetli olurdu. Neyse ki Jake ve Adam, bir yumuşatma eğrisini linear() karşılığına dönüştürmenize yardımcı olacak bir araç oluşturdu.

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

Sağ üstte hazır ayarlardan birini de seçebilirsiniz: Spring (Yay), Bounce (Sıçrama), Simple elastic (Basit esneklik) veya Materyal Tasarım vurgulu yumuşak geçiş seçenekleri mevcuttur.

Geliştirici Araçları desteği

Geliştirici Araçları'nda linear() sonucunu görselleştirme ve düzenleme desteği sunulur. Durakları sürüklemenize olanak tanıyan etkileşimli bir ipucu göstermek için simgeyi tıklayın.

Bu DevTools özelliği, Chrome 114'ten itibaren DevTools'da kullanılabilir.