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, dönüşüm ölçeği değiştiğinde (will-change: transform CSS özelliğine sahip değilse) tüm içerikler yeniden sınıflandırılır. Diğer bir deyişle will-change: transform, "lütfen animasyon işlemini hızlıca yapın" anlamına gelir.

Bu, yalnızca komut dosyası değiştirme yoluyla gerçekleşen ölçekler için geçerlidir ve CSS animasyonları veya Web Animasyonları için geçerli değildir.

Bu, sitenizin muhtemelen daha iyi görünen içeriğe sahip olacağı ancak aşağıda özetlenen bazı basit değişiklikler olmadan yavaş olabileceği anlamına gelir.

Web geliştiricileri için sonuçlar

Bu değişiklik kapsamında will-change: transform, içeriği sabit bir bit eşlem haline getirmeye zorlamak gibi düşünülebilir. Bu bit eşlem, dönüşüm güncellemelerinde daha sonra hiçbir zaman değişmez. Bu, geliştiricilerin bit eşlem üzerindeki animasyonların hareket ettirme, döndürme veya ölçeklendirme gibi dönüşüm hızını artırmasına olanak tanır.

Ölçek ve çevirme dönüşümleri arasında ayrım yapmayız.

Çok hızlı (diğer bir deyişle 60 fps) dönüştürme animasyon hızlarına ihtiyacınız olduğunda will-change: transformöğelerini yerleştirin ve öğenin her karede yüksek kalitede piksellenmesinin yeterince hızlı olmaması beklenir. Aksi takdirde will-change: transform kullanmaktan kaçının.

Performans kalitesi dengesini optimize etmek için, animasyonlar başladığında will-change: transform öğesini eklemek ve sona erdiğinde kaldırmak isteyebilirsiniz. Bununla birlikte, will-change: transform eklemenin veya kaldırmanın genellikle tek seferlik yüksek bir performans maliyeti olduğunu unutmayın.

Uygulamada dikkat edilmesi gereken diğer hususlar

will-change: transform kaldırıldığında içerik yalnızca sonraki animasyon karesinde (requestAnimationFrame) üzerinden. Bu nedenle, üzerinde will-change: transform bulunan bir katmanınız varsa ve sadece bir yeniden tarama işlemini tetikleyip ardından animasyon oluşturmaya devam etmek istiyorsanız will-change: transform'i kaldırmanız ve daha sonra bunu bir requestAnimationFrame() callback'te yeniden eklemeniz gerekir.

Animasyon sırasında herhangi bir zamanda geçerli ölçekte kafes oluşturmak isterseniz bir karede kaldırmak için yukarıdaki tekniği uygulayın, sonraki kareye will-change: transform tekrar ekleyin.

Bu durum, içeriğin birleştirilmiş katmanını kaybetmesi gibi yan etkiye neden olarak yukarıdaki önerinin biraz pahalı olmasına neden olabilir. Bu bir sorun oluşturuyorsa bu işlem sırasında birleştirilmiş bir katmanda kaldığından emin olmak için içeriğe transform: translateZ(0) öğesini de eklemenizi öneririz.

Etkinin özeti

Bu değişiklik, oluşturulan içeriğin kalitesi, performansı ve geliştirici kontrolü üzerinde etkili olacak.

  • Oluşturulan içerik kalitesi: Dönüşüm ölçeğini canlandıran öğelerin oluşturulan çıktısı, varsayılan olarak her zaman net olur.
  • Performans: will-change: transform varken dönüşüm animasyonu hızlı gerçekleştirilir.
  • Geliştirici kontrolü: Geliştiriciler, ekleme ve kaldırma yoluyla öğe ve animasyon karesi bazında kalite ve hız arasında seçim yapabilirler
    will-change: transform.

Çok daha fazla ayrıntı için yukarıdaki başvurulan tasarım belgesine bakın.

Örnekler

Bu örnekte, remainsBlurry kimliğine sahip öğe bu değişiklikten sonra bulanık kalacak ama noLongerBlurry kimliğine sahip öğe net bir hale gelecek. Bunun nedeni, ilk öğenin üzerinde bir will- change: transform CSS mülkünün olmasıdır.

Gerçek uygulamalardan dönüşüm ölçeği animasyon örnekleri