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

Yuriko Hirota

Kaydırmaya dayalı animasyonlardaki yenilikler

Kaydırmaya dayalı animasyonlar, kullanıcının kaydırma konumu tarafından tetiklenen ve web sitenize veya web uygulamanıza etkileşim ve görsel ilgi katmanın bir yoludur. Bu sayede kullanıcıların ilgisini çekebilir ve web sitenizi görsel olarak daha çekici hale getirebilirsiniz.

Geçmişte, kaydırmaya dayalı animasyonlar oluşturmanın tek yolu ana iş parçacığındaki kaydırma etkinliğine yanıt vermekti. Bu durum iki büyük soruna yol açtı:

• Kaydırma işlemi ayrı bir iş parçacığında gerçekleştirilir ve bu nedenle kaydırma etkinlikleri eşzamansız olarak sunulur.
• Ana iş parçacığı animasyonları duraklamaya tabidir.

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

Artık kaydırmaya dayalı animasyonları desteklemek için yeni bir API grubu sunuyoruz. Bu API'leri CSS veya JavaScript'ten kullanabilirsiniz. API, mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışır. Bu sayede kaydırmaya dayalı animasyonların uygulanması çok daha kolay ve çok daha akıcı hale gelir. Kaydırmaya dayalı animasyonlar API'si şu anda aşağıdaki tarayıcılarda desteklenmektedir:

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

Kaydırmaya dayalı animasyonlar CSS API'si ile klasik JavaScript arasındaki fark

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

Doküman, kullanıcının scrollHeight öğesini ne kadar kaydırdığını hesaplamak için her scroll etkinliği gerçekleştiğinde yanıt verir.

document.addEventListener("scroll&q>uot;, () = {
  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'nin kullanıldığı 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 zorlu işleri yapar.

Şimdi de ilginç kısma geçelim. 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 uyguladığınızı 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, klasik JavaScript sürümü ana iş parçacığı kaynaklarının birleşimi nedeniyle titrek ve yavaş hale geliyor. Diğer taraftan, CSS sürümü yoğun JavaScript çalışmasından hiç etkilenmez ve kullanıcının kaydırma etkileşimlerine yanıt verebilir.

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

Aşağıdaki demoda, CyberAgent tarafından oluşturulan kaydırmaya dayalı animasyon uygulaması gösterilmektedir. Kaydırdıkça fotoğrafın yavaş yavaş göründüğünü görebilirsiniz.

Yeni kaydırmaya dayalı animasyonlar JavaScript API'si ile klasik JavaScript arasındaki farklar

Yeni API'nin avantajı yalnızca CSS ile sınırlı değildir. JavaScript kullanarak da akıcı kaydırmaya dayalı animasyonlar 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, yalnızca JavaScript kullanarak önceki CSS demosunda gösterilen ilerleme çubuğu animasyonunu 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ışır. Bu sayede, animasyonlar klasik JavaScript yaklaşımına kıyasla çok daha sorunsuz hale gelir.

Ayrıca bu yeni API, bildirim temelli 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

CSS ve JavaScript'teki bu yeni API'leri kullanarak demoları karşılaştırabileceğiniz demo sitesi üzerinden kaydırmaya dayalı animasyonun farklı uygulamalarını inceleyebilirsiniz.

Kaydırmaya dayalı yeni animasyonlar hakkında daha fazla bilgi edinmek isterseniz bu makaleye ve I/O 2023 konuşmasına göz atın.