Birleştirilmiş katmanları ölçek değişimine göre yeniden görüntüleme

Chris Harrelson
Chris Harrelson
X GitHub

Özet

Chrome 53'ten itibaren, will-change: transform CSS mülküne sahip olmayan tüm içerikler, dönüştürme ölçeği değiştiğinde yeniden rasterlenir. Diğer bir deyişle, will-change: transform "lütfen animasyonu hızlı oynat" anlamına gelir.

Bu yalnızca komut dosyası değiştirme yoluyla gerçekleşen dönüştürme ölçekleri için geçerlidir ve CSS animasyonları veya web animasyonları için geçerli değildir.

Bu, sitenizde daha iyi görünen içerikler yer alacağı anlamına gelir. Ancak aşağıda açıklanan bazı basit değişiklikler yapılmazsa siteniz daha yavaş da olabilir.

Web geliştiricileri için sonuçları

Bu değişiklik kapsamında will-change: transform, içeriğin sabit bir bitmap'e rasterleştirilmesini zorunlu kıldığı düşünülebilir. Bu bitmap, dönüştürme güncellemeleri sırasında hiçbir zaman değişmez. Bu sayede geliştiriciler, bitmap'te dönüşüm animasyonlarının hızını (ör. bitmap'i taşıma, döndürme veya ölçeklendirme) artırabilir.

Ölçek ve çeviri dönüşümleri arasında ayrım yapılmaz.

Çok hızlı (yani 60 fps) dönüştürme animasyonu hızlarına ihtiyaç duyduğunuzda öğelere will-change: transform ekleyin ve öğenin her karede yüksek kalitede rasterleştirilmesinin yeterince hızlı olmaması beklenir. Aksi takdirde will-change: transform kullanmayın.

Performans ve kalite arasındaki dengeyi optimize etmek için animasyonlar başladığında will-change: transform ekleyip bittiğinde kaldırabilirsiniz. Bununla birlikte, will-change: transform eklemenin veya kaldırmanın genellikle tek seferlik büyük bir performans maliyeti olduğunu unutmayın.

Uygulamayla ilgili diğer hususlar

will-change: transform kaldırılırsa içerik, net bir ölçekte yeniden rasterlenir ancak yalnızca bir sonraki animasyon karesinde (requestAnimationFrame) aracılığıyla) Bu nedenle, üzerinde will-change: transform bulunan bir katmanınız varsa ve yalnızca yeniden rasterleştirmeyi tetiklemek ancak animasyona devam etmek istiyorsanız will-change:transform özelliğini kaldırmanız ve ardından requestAnimationFrame() callback içine yeniden eklemeniz gerekir.

Bir animasyon sırasında herhangi bir zamanda mevcut ölçekte rasterleştirmek isterseniz yukarıdaki tekniği uygulayarak bir karede kaldırın, sonraki karede will-change: transform öğesini yeniden ekleyin.

Bu işlem, içeriğin birleştirilmiş katmanını kaybetmesine neden olarak yukarıdaki önerinin biraz pahalı olmasına yol açabilir. Bu bir sorunsa bu işlem sırasında birleştirilmiş bir katmanda kalmasını sağlamak için içeriğe transform: translateZ(0) eklemenizi öneririz.

Etkinin özeti

Bu değişiklik, oluşturulan içerik kalitesi, performans ve geliştirici kontrolü açısından önemli sonuçlara yol açar.

  • Oluşturulan içerik kalitesi: Dönüşüm ölçeğini animasyonlu olarak değiştiren öğelerin oluşturulan çıkışı varsayılan olarak her zaman net olur.
  • Performans: will-change: transform mevcut olduğunda dönüşüm animasyonu hızlı olur.
  • Geliştirici kontrolü: Geliştiriciler, öğe ve animasyon karesi başına
    will-change: transform ekleyerek ve kaldırarak kalite ile hız arasında seçim yapabilir.

Daha fazla ayrıntı için yukarıdaki atıfta bulunulan tasarım dokümanlarını inceleyin.

Örnekler

Bu örnekte, remainsBlurry kimlikli öğe bu değişiklikten sonra bulanık kalırken noLongerBlurry kimlikli öğe netleşir. Bunun nedeni, birincisinde will- change: transform CSS mülkünün bulunmasıdır.

Gerçek uygulamalardan ölçek dönüştürme animasyon örnekleri