Ö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 veyaopacity
ya dafilter
değerlerini taşıyın will-change
özelliğini öğenize ekleyin.OffscreenCanvas
ile animasyonlu tuval çizimi oluşturun- WebGL 3D çizimi oluşturma
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.
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](https://developer.chrome.com/static/blog/hardware-accelerated-animations/image/performance-panel-paint-1c546b2fb2532.png?authuser=5&hl=tr)
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](https://developer.chrome.com/static/blog/hardware-accelerated-animations/image/performance-panel-showing-bdf7ff078e40e.png?authuser=5&hl=tr)
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.
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.
Kapak Resmi: Unsplash için Siora Photography