Donanım hızlandırmalı animasyon özellikleriyle ilgili güncellemeler

Una Kravets

Özet: Chromium; SVG animasyonları, yüzdeye dayalı dönüşümler ve yakında arka plan rengi ve klip yolu animasyonları için donanım hızlandırma özelliklerini otomatik olarak güncelliyor.

Web animasyonu performansı söz konusu olduğunda büyük olasılıkla "donanım hızlandırmalı" ve "GPU hızlandırmalı" animasyon terimleri ortaya çıkar. Peki bunlar ne anlama geliyor? Donanım hızlandırmalı stiller, görsel stilleri oluşturmak için CPU (Merkezi İşlem Birimi) yerine GPU'dan (Grafik İşleme Birimi) yararlanan stillerdir. Bunun nedeni, GPU'nun bir web sayfasındaki görsel değişiklikleri CPU'dan daha hızlı oluşturabilmesidir.

Grafik ağırlıklı geçişleri ve animasyonları boşaltmak için GPU'nun kullanılması, ana iş parçacığından etkilenmediği için daha yumuşak görseller ve daha az olumsuzluk anlamına gelir. Ana iş parçacığından çıkardığınız animasyonlarınız, sayfanızda çalışan diğer etkin komut dosyalarının kabuğunu atlar. Bu da görsellerinizi yavaşlatır ve soruna neden olur.

Donanım hızlandırmalı animasyonları etkinleştirme

Donanım hızlandırmalı animasyonlar katmanlar halinde birleştirilir ve görsel oluşturma performansını iyileştirmek için geliştiricilerin son derece sorunsuz 60 FPS (saniyedeki kare sayısı) animasyonlar elde etmesine yardımcı olur. Şu anda web'de donanım hızlandırmalı animasyonları ve geçişleri belirtmenin ve etkinleştirmenin birkaç yolu vardır:

  • CSS transform işlevlerini kullanın veya opacity ya da filter değerlerini taşıyın
  • will-change özelliğini öğenize ekleyin.
  • OffscreenCanvas ile animasyonlu tuval çizimi oluşturun
  • WebGL 3D çizimi oluşturma
Chromium oluşturma ekibi, donanım hızlandırmanın etkinleştirilmesiyle ilgili bir sonraki adımın ne olması gerektiğini belirlemek için en çok canlandırılmış özelliklerin kullanımını sürekli olarak takip eder. Varsayılan olarak donanım hızlandırmalı mevcut CSS özellikleri şimdilik yalnızca opacity, filter ve transform özelliklerini içeriyor ancak background-color ve clip-path yakında listeye eklenecek.

Chromium'da varsayılan olarak donanım hızlandırmalı haline gelen başka neler var? Ardışık düzende, SVG animasyonları gibi, geliştiricilerin yoğun bir şekilde istediği özellikler de var.

Donanım hızlandırmalı SVG animasyonları

SVG, tüm web sitelerine mükemmel bir katkı sağlar ve artık SVG ile bu etkileşimler daha yüksek performans gösterebilir. Chromium 89'dan itibaren Chrome, SVG animasyonlarında varsayılan olarak donanım hızlandırmayı etkinleştirmek için Firefox'un benzerlerine katılacaktır. Geliştirici olarak sizin ne yapmanız gerekiyor? Hiçbir şey. Bu ayar, Chromium 89 ve sonraki sürümlerde SVG animasyonlarına otomatik olarak uygulanır.

Örnek

Donanım hızlandırmanın açık olduğu ve olmadığı SVG animasyonu arasındaki farklara göz atalım. Yükleme göstergeleri, facebook.com'da görülen bu gibi yaygın olarak kullanılan kullanıcı arayüzü öğeleridir. Bu göstergeler sunucuda yapılan işin ne olduğuna işaret eder ve kullanıcı yanıt bekler. Burada gösterilen örnekte, yanıt kenar çubuğuna ek sonuçların yüklenmesi olacaktır.

Facebook kenar çubuğu kullanıcı arayüzünde, ek içerik yüklenirken dairesel bir yükleyici gösteriliyor.

Geliştirici Araçları'nı açtığımızda, profil oluşturmaya başlayıp CPU ve GPU hızlandırmalı animasyon deneyimi arasındaki farkları görebiliyoruz.

Boya flaşının açık olduğu performans paneli
Sol: Chromium 88. Sağ: SVG animasyonları için donanım hızlandırmalı Chromium 89. Benoit Girard'ın JSFiddle uygulamasındaki demoyu izleyin.

Sol tarafta (Chromium 87), döner simge her animasyon gösterdiğinde (sürekli olarak) yeniden boyama yapıldığını görebilirsiniz. Sağ tarafta yeniden boyama yoktur (Chromium 89 ve Firefox). Yanıp sönen Paint modunu açarken Geliştirici Araçları Oluşturma panelinde bunu test edebiliriz.

Oluşturmayı gösteren performans paneli
Sol: Chromium 88. Sağ: SVG animasyonları için donanım hızlandırmalı Chromium 89. Benoit Girard'ın JSFiddle uygulamasındaki demoyu izleyin.

Performans paneline daha yakından baktığınızda, bu etkiyi ve web mülkünüzün genel performansını nasıl etkilediğini bir kez daha görebilirsiniz. Animasyon için oluşturma ve boyama süresini tamamen ortadan kaldırırsınız. Bu da daha yumuşak animasyonlar ve daha yüksek performanslı uygulamalar anlamına gelir. Facebook, donanım hızlandırmalı SVG için tarayıcı desteği artana kadar bu SVG tabanlı yükleyiciyi göndermeyecek olsa da tema oluşturma, ölçeklendirme ve çözümleme gereksinimleri ile daha kolay bakım konularında daha fazla esneklik sağlar.

Animasyonların yüzdesi

Etkileşimler ekibi, Chromium 89'da yüzde dönüşüm animasyonları için de destek gönderiyor. Yüzdeye dayalı animasyonlar, yüzdeye dayalı hareket içeren etkileşimleri açıklar. Örneğin, bir şeyi %20 oranında artırabilir veya translateX: -100% gibi bir şey kullanarak duyarlı bir kenar çubuğu menüsünü ekranın dışına kaydırabilirsiniz.

Menüyü daha küçük ekran boyutlarında açıp gizlemek için yüzde dönüşümü kullanan waze.com gezinme örneği.

Bu tür kullanıcı arayüzü animasyonları nispeten yaygındır ancak şu anda bu tür animasyonları birleştiremediğimiz için donanım hızlandırmadan yararlanamamaktadır. Dönüşümlerdeki yüzdeler kutu boyutuna (ör. düzen) bağlıdır ancak artık düzen boyutu her kareyi değiştirmediği sürece tarayıcı mutlak dönüşüm değerlerini önceden hesaplayabilir ve bunları geliştirici piksel değerleri sağlamış gibi çalıştırabilir. Ancak iyi haber şu ki Chromium ekibi bu özellik üzerinde çalışıyor. Yakında bu tür animasyonlar otomatik olarak birleştirilecek ve donanımla hızlandırılacaktır.

Sırada ne var?

Bu güncellenen animasyonlar, web stilini çok daha yumuşak hale getirecek. Yukarıda da belirttiğimiz gibi ekip her zaman yeni web ihtiyaçlarının neler ortaya çıktığına bakar. Şu anda background-color ve clip-path ürünlerini, Chromium'un gelecekteki sürümlerinde donanım hızlandırmayı otomatik olarak kullanacak şekilde dönüştürmeyi planlıyoruz.

background-color, geçişler ve efektler için yüksek kullanım sayısından dolayı bir önceliktir. clip-path ise web genelinde çok daha başarılı geçiş efektleri sağlar. Performans, etkileşimle buluştuğunda herkes kazanır.

transition.style: Adam Argyle'ın CSS geçiş efektlerini öne çıkaran bir demo sitesi.

Kapak Resmi: Unsplash için Siora Photography