Animasyon ve Geçiş Hata Ayıklayıcısı

Chrome DevTools → Diğer araçlar → Animasyonlar (veya Cmd+Shift+P → Animasyonlar). Panel, CSS geçişlerini ve animasyonlarını çalıştıkları sırada kaydeder ve bunları sürükleyerek konumlandırma ile oynatma hızı denetimlerinin bulunduğu bir zaman çizelgesinde gösterir.

Animasyonlar paneli %10, %25 ve %100 oynatma hızları sunar. Hızı %10'a düşürmek, tam hızda görünmeyen zamanlama sorunlarını, yumuşatma eğrisi problemlerini ve takılmaları ortaya çıkarır; bu, karmaşık çok öğeli koreografilerde hata ayıklamak için gereklidir.

Kaydedilen her animasyon; öğe adı, süre çubuğu, gecikme kayması ve yineleme sayısıyla birlikte bir satır olarak görünür. Anahtar kare elmasları, zamanlama işlevi değişikliklerini gösterir. Bir satırın üzerine gelmek, görünüm alanındaki öğeyi vurgular.

Animasyon panelindeki oynatma imlecini animasyon zaman çizelgesinde istediğiniz noktaya sürükleyin. Sayfa o kareyi tam olarak oluşturur; herhangi bir animasyonu herhangi bir anda dondurarak öğe konumlarını, opaklığı ve dönüşüm değerlerini Hesaplanan panelinde aynı anda inceleyebilirsiniz.

Genişletmek için bir animasyon satırına tıklayın. Tek tek anahtar kareler zaman çizelgesinde elmas olarak görünür. İlgili @keyframes kuralına Stiller panelinde gitmek ve kuralı canlı önizlemeyle düzenlemek için bir anahtar kare elmasına tıklayın.

Chrome DevTools, her animasyon bölümü için cubic-bezier eğrilerini gösterir. Stiller panelinde bir zamanlama işlevinin yanındaki eğri simgesine tıklayarak cubic-bezier düzenleyicisini açın; denetim noktalarını sürükleyin ve animasyonun gerçek zamanlı olarak güncellenmesini izleyin.

CSS geçişleri tetiklendiklerinde Animasyonlar paneline kaydedilir. Bir üzerine gelme durumunu veya sınıf değiştirmeyi tetikleyin; panel geçişi yakalar. Süresini, gecikmesini ve zamanlama işlevini inceleyin. Bu, geçişler yanlış hissettirdiğinde ancak kaynakları belirsiz olduğunda yararlıdır.

Oluşturma → Katman Kenarlıkları etkinleştirildiğinde (DevTools → Oluşturma), kendi GPU katmanında bulunan animasyonlu öğeler yeşil kenarlıklar gösterir. Birleştirilmeyen animasyonlar (width, top ve color animasyonları) katman kenarlığı göstermez ve Boyama Yanıp Sönmesi etkinleştirildiğinde görülebilen boyama yanıp sönmelerine neden olabilir.

Animasyon sırasında bir Performans profili kaydedin. Alev grafiğinde animasyon kareleriyle ilişkili uzun Boyama veya Yerleşim olaylarını arayın. Yalnızca birleştirici tarafından işlenen animasyonlar (transform/opacity), hızlı olan ve boyama gerektirmeyen yalnızca Birleşik Katman olayları olarak görünür.

rAF kullanan JS animasyonları, Performans panelinde Kareler bölümü altında görünür. 16 ms'yi aşan uzun rAF geri çağrıları kare düşüşlerine neden olur. Pahalı hesaplamaları bulmak için geri çağrının profilini çıkarın ve mümkünse Web Workers kullanarak bunları ana iş parçacığından taşıyın.

Web Animasyonları API'si (element.animate()) ve WAAPI tabanlı kitaplıklar, CSS animasyonlarının yanında Animasyonlar panelinde görünür. Panel kaynağı (CSS veya WAAPI) ayırt edemez; ancak sürükleyerek konumlandırma ve ağır çekim denetimleri her ikisinde de çalışır.

Animasyonlar panelindeki oynatma imlecini sürükleyerek konumlandırmak ne yapmanızı sağlar?

DevTools Animasyonlar paneli, CSS geçişlerini ve animasyonlarını sürükleyerek konumlandırılabilen bir zaman çizelgesi, değişken oynatma hızı, anahtar kare incelemesi ve cubic-bezier düzenleme özellikleriyle kaydeder. Performans profili çıkarma ve Katman görselleştirmesiyle birlikte kullanıldığında CSS animasyonlarının hem doğruluğunda hem performansında hata ayıklamak için kapsamlı araçlar sunar.