Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Yuriko Hirota

Kaydırmayla çalışan animasyonlarda ne gibi yenilikler var?

Kaydırma odaklı animasyonlar, web sitenize veya web uygulamanıza kullanıcının kaydırma konumu tarafından 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 işlemi ayrı bir iş parçacığında gerçekleştirilir ve bu nedenle kaydırma etkinlikleri eşzamansız olarak yayınlanır.
Ana iş parçacığı animasyonları takılmalara tabidir.

Bu durum, kaydırmayla senkronize çalışan ve yüksek performanslı kaydırma animasyonlarının oluşturulmasını imkansız veya çok zor hale getirir.

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

Tarayıcı desteği

Kaynak

Bu makalede, yeni API ile kaydırma destekli 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 ve klasik JavaScript

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

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

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'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 ağır işleri yapar.

Şimdi ilginç olan kısıma gelelim. Web sitesinin her iki sürümünde de ana iş parçacığı kaynaklarının çoğunu tüketecek süper 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);
}

Tahmin edebileceğiniz gibi, klasik JavaScript sürümü ana iş parçacığı kaynaklarının birleştiği noktada takılmalara ve yavaşlamalara neden olur. Ö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.

göz atın.

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

Ana iş parçacığı karşılaştırması.

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.

kalemine bakın.

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

Yeni API'nin avantajları 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ışır. Bu sayede animasyonlar, klasik JavaScript yaklaşımına kıyasla çok daha akıcı olur.

Ayrıca bu yeni API, açıklayıcı kaydırma odaklı animasyonları etkinleştirmek için mevcut Web Animasyonları API'si (WAAPI) ve CSS Animasyonları API'si ile birlikte çalışır.

göz atın.

Diğer demolar ve kaynaklar

Kaydırma odaklı animasyonun farklı uygulamalarını bu demo sitesinde inceleyebilirsiniz. Bu sitede, CSS ve JavaScript'teki bu yeni API'leri kullanan 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.