Kaydırmaya dayalı animasyonların performansıyla ilgili bir örnek olay

Yuriko Hirota

Kaydırmaya dayalı animasyonlardaki yenilikler

Kaydırma odaklı animasyonlar, web sitenize veya web uygulamanıza kullanıcının kaydırma konumuyla tetiklenen etkileşim ve görsel ilgi eklemenin bir yoludur. Bu, kullanıcıların etkileşimini sürdürmenin ve web sitenizi görsel açıdan daha ilgi çekici hale getirmenin mükemmel bir yolu olabilir.

Geçmişte, kaydırma odaklı animasyonlar oluşturmanın tek yolu ana mesaj dizisindeki kaydırma etkinliğine yanıt vermekti. Bu durum iki önemli soruna yol açmıştır:

• Kaydırma ayrı bir ileti dizisinde gerçekleştirilir ve bu nedenle kaydırma etkinliklerini eşzamansız olarak yayınlar.
• Ana iş parçacığı animasyonları jant'a tabidir.

Bu, kaydırmayla senkronize olan, kaydırmaya dayalı yüksek performanslı animasyonlar oluşturmayı imkansız veya çok zor hale getirir.

Şimdi de CSS veya JavaScript'ten kullanabileceğiniz, kaydırmayla çalışan animasyonları desteklemek için yeni bir API grubu kullanıma sunuyoruz. API, mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışarak kaydırmaya dayalı animasyonların uygulanmasını çok daha kolay ve çok daha yumuşak hale getirir. Kaydırma destekli animasyonlar API'si şu anda aşağıdaki tarayıcılarda desteklenmektedir:

Bu makalede, yeni API ile kaydırma odaklı animasyonların ne kadar kolay ve akıcı olabileceğini göstermek için yeni yaklaşım klasik JavaScript tekniğiyle karşılaştırılmaktadır.

Kaydırma odaklı animasyonlar CSS API'si ile klasik JavaScript'in karşılaştırması

Aşağıdaki örnek ilerleme çubuğu, sınıfın JavaScript teknikleri kullanılarak oluşturulmuştur.

Doküman, scroll etkinliği her gerçekleştiğinde yanıt vererek kullanıcının sayfayı scrollHeight yüzde ne kadarına kaydırdığını hesaplar.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

Aşağıdaki demoda, CSS ile yeni API kullanılırken aynı ilerleme çubuğu gösterilmektedir.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

Yeni animation-timeline CSS özelliği, kaydırma aralığındaki bir konumu otomatik olarak ilerleme yüzdesine dönüştürerek tüm ağır işleri yapar.

Şimdi işin ilginç olan kısmı geliyor; web sitesinin her iki sürümünde de ana iş parçacığı kaynaklarının çoğunu tüketecek çok ağır bir hesaplama gerçekleştirdiğinizi varsayalım.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Beklediğiniz gibi, ana iş parçacığı kaynakları bağlantısı nedeniyle klasik JavaScript sürümü kötü ve yavaş hale gelir. Öte yandan CSS sürümü, yoğun JavaScript çalışmalarından tamamen etkilenmez ve kullanıcının kaydırma etkileşimlerine yanıt verebilir.

Geliştirici Araçları'nda CPU kullanımı, aşağıdaki ekran görüntülerinde görüldüğü gibi tamamen farklıdır.

Aşağıdaki demoda, CyberAgent tarafından oluşturulan kaydırma odaklı animasyon uygulaması gösterilmektedir. Ekranı kaydırırken fotoğrafın yavaş yavaş belirdiğini görebilirsiniz.

Klasik JavaScript'e kıyasla yeni kaydırma odaklı animasyon JavaScript API'si

Yeni API'nin avantajı yalnızca CSS ile sınırlı değildir. JavaScript'i kullanarak kaydırmayla çalışan, akıcı animasyonlar da oluşturabilirsiniz. Aşağıdaki örneğe göz atın:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Bu sayede, önceki CSS demosunda gösterilen ilerleme çubuğu animasyonunu yalnızca JavaScript kullanarak oluşturabilirsiniz. Temel teknoloji, CSS sürümüyle aynıdır. API, mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışarak animasyonları klasik JavaScript yaklaşımıyla karşılaştırıldığında çok daha akıcı hale getirir.

Ayrıca bu yeni API, bildirimsel kaydırmaya dayalı animasyonları etkinleştirmek için mevcut Web Animations API (WAAPI) ve CSS Animations API ile birlikte çalışır.

Diğer demolar ve kaynaklar

Kaydırma odaklı animasyonun farklı uygulamalarına göz atmak için bu demo sitesine göz atabilirsiniz. Burada CSS ve JavaScript'teki bu yeni API'leri kullanarak demoları karşılaştırabilirsiniz.

Kaydırmayla çalışan yeni animasyonlar hakkında daha fazla bilgi edinmek istiyorsanız bu makaleye ve I/O 2023 konuşmasına göz atın.