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

Una Kravets

Twitter Mastodon Ana Sayfa

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

Web animasyonu performansı söz konusu olduğunda muhtemelen "donanım hızlandırmalı" ve "GPU hızlandırılmış" animasyonlar terimleri karşınıza çıkacaktır. 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) faydalanan stillerdir. Bunun nedeni, GPU'nun bir web sayfasındaki görsel değişiklikleri CPU'dan daha hızlı oluşturabilmesidir.

Yoğun grafik içeren geçişleri ve animasyonları aktarmak için GPU'nun kullanılması, daha düzgün görseller ve daha az olumsuzluk anlamına gelir. Çünkü bu animasyonlar ana iş parçacığından etkilenmez. Animasyonlarınız ana iş parçacığından çekildiğinde, sayfanızda çalışan diğer etkin komut dosyalarının kabuğunu atlar ve bu da görsellerinizi yavaşlatır ve olumsuzluk oluşturur.

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

Donanım hızlandırmalı animasyonlar katmanlar halinde birleştirilir ve geliştiricilerin görsel oluşturma performansını iyileştirmek için 60 FPS'lik (saniyedeki kare sayısı) animasyonlar sorunsuz bir şekilde elde etmelerine 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 değiştirin
• Öğenize will-change özelliğini ekleyin.
• OffscreenCanvas ile animasyonlu bir tuval çizimi oluşturun
• WebGL 3D çizimi oluşturma

Chromium oluşturma ekibi, donanım hızlandırmayı etkinleştirme konusunda bir sonraki adımın ne olması gerektiğini belirlemek için en animasyonlu özelliklerin kullanımını sürekli olarak izlemektedir. Varsayılan olarak donanım hızlandırmalı mevcut CSS mülkleri şimdilik yalnızca opacity, filter ve transform özelliklerini içerse de background-color ve clip-path yakında listeye katılacak.

Chromium'da başka neler varsayılan olarak donanım hızlandırmalı hale geliyor? Yakında, geliştiricilerin istekte bulunduğu SVG animasyonları da dahil olmak üzere birkaç değişiklik yapılacak.

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

SVG, her web sitesine mükemmel bir katkı sağlar ve artık SVG ile bu etkileşimler daha yüksek performans gösterebiliyor. Chromium 89'dan itibaren Chrome, SVG animasyonlarında varsayılan olarak donanım hızlandırmayı etkinleştirmek için Firefox'un beğenilerine katılmış olacak. Geliştirici olarak ne yapmanız gerekiyor? Hiçbir şey. Bu durum Chromium 89 ve sonraki sürümlerde SVG animasyonları için 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üldüğü gibi yaygın olarak kullanılan kullanıcı arayüzü öğeleridir. Bu göstergeler, kullanıcı bir yanıt beklerken sunucuda yapıldığına dair ipucu verir. Burada gösterilen örnekte, yanıt kenar çubuğunda ek sonuçların yüklenmesi olacaktır.

Facebook'un 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, profili oluşturmaya başlayabilir, CPU ile GPU hızlandırmalı animasyon deneyimi arasındaki farkları görebiliriz.

Sol: Chromium 88. Sağ: SVG animasyonları için donanım hızlandırmalı Chromium 89. Benoit Girard'ın JSFiddle'daki demosunu izleyin.

Solda (Chromium 87), döner simgenin her animasyonunda (sürekli gerçekleşen) yeniden boyama işleminin gerçekleştiğini görebilirsiniz (bu, kesintisiz olarak gerçekleşir). Sağ tarafta yeniden boyama yok (Chromium 89 ve Firefox). Bunu, DevTools Oluşturma panelinde, Paint yanıp sönmeyi açarken test edebiliriz.

Sol: Chromium 88. Sağ: SVG animasyonları için donanım hızlandırmalı Chromium 89. Benoit Girard'ın JSFiddle'daki demosunu izleyin.

Performans panelini daha yakından incelediğinizde, bu etkiyi ve web mülkünüzün genel performansını nasıl etkilediğini tekrar 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, ölçeklendirme ve çözünürlük gereksinimleri ve daha kolay bakım açısından daha fazla esneklik sağlanacaktır.

Yüzde animasyonları

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

waze.com'dan gezinme örneği. Bu örnekte, menüyü daha küçük ekran boyutlarında açmak ve gizlemek için yüzde dönüşümü kullanılmaktadır.

Bu tür kullanıcı arayüzü animasyonları nispeten yaygındır ancak daha önce bu tür animasyonları birleştiremediğimiz için şu anda donanım hızlandırmadan yararlanılmamaktadır. Dönüşümlerdeki yüzdeler kutu boyutuna (yani düzene) bağlıdır ancak artık düzen boyutu her kare değişmediğ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. Neyse ki Chromium ekibi bu özellik üzerinde çalışıyor ve yakında bu tür animasyonlar otomatik olarak birleştirilecek ve donanım hızlandırmalı hale gelecek.

Sırada ne var?

Bu güncellenmiş animasyonlar web stilini çok daha yumuşak bir hale getirecektir. Ayrıca, yukarıda belirtildiği gibi, ekip her zaman web'de gelecekte ne gibi ihtiyaçların ortaya çıkacağını görmek için çalışıyor. Şu anda, Chromium'un gelecekteki sürümlerinde donanım hızlandırmayı otomatik olarak kullanmak için background-color ve clip-path uygulamalarını dönüştürme işlemi planlıyoruz.

Geçişler ve etkiler için yüksek kullanım sayısı olması nedeniyle background-color bir önceliktir ve clip-path web'de çok daha etkili geçiş efektleri sağlar. Performans etkileşimle buluştuğunda herkes kazanır.

transition.style: Adam Argyle'ın CSS geçiş efektlerinin vurgulandığı demo site.

Kapak Resmi: Unsplash için Siora Fotoğrafçılığı.