Animasyon Denetçisi, herhangi bir web sayfasında çalışan her CSS animasyonu ve geçişi üzerinde tam kontrol sağlar. Tüm animasyonları aynı anda duraklatın, kare kare incelemek için yavaşlatın, performansı test etmek için hızlandırın veya zaman çizelgesinde manuel olarak gezinin — hepsi tarayıcı DevTools'una dokunmadan tek bir yüzen panelden.
CSS animasyonlarının ayıklanması meşhur bir şekilde zordur. Hızlı gerçekleşirler, çakışırlar ve tarayıcı DevTools, animasyon özelliklerini bulmak için hesaplanmış stiller arasında avlanmanızı gerektirir. Animasyon Denetçisi, sayfadaki her @keyframes animasyonunu ve CSS geçişini otomatik olarak algılayarak, bunları tam yapılandırmalarıyla (süre, yumuşatma, gecikme, yineleme sayısı) listeleyerek ve global olarak veya animasyon başına çalışan oynatma kontrolleri sunarak bu sorunu çözer. İster titreyen bir hover efektini ayıklıyor, ister bir sayfa giriş sırasının zamanlamasını ince ayar yapıyor veya karmaşık bir animasyon kütüphanesinin nasıl çalıştığını anlamaya çalışıyor olun, bu araç size kontrolü verir.
Tek bir tıkla sayfadaki her animasyonu anında dondurun. Tüm animasyonlar mevcut konumunda duraklar — başa sıfırlanmaz. Tam olarak durdukları yerden devam etmek için oynat'a tıklayın. Çıplak gözle yakalanması imkansız olan animasyon ortası durumları incelemek için gereklidir.
Tüm animasyonların oynatma hızını aynı anda ayarlayın. 0.25x (çeyrek hız), 0.5x, 1x (normal), 2x veya 4x arasından seçim yapın. 0.25x'te çalıştırmak, en hızlı 200ms geçişlerini bile gözlemlemeyi ve ayıklamayı kolaylaştırır.
Sayfadaki her CSS animasyonu ve geçişi otomatik olarak algılanır ve kaydırılabilir bir listede görüntülenir. Her giriş animasyonun adını (veya geçiş özelliğini), süresini, zamanlama işlevini (ease, linear, cubic-bezier), gecikmesini, yineleme sayısını ve mevcut çalışma durumunu gösterir.
Bir animasyondan kare kare manuel olarak geçmek için zaman çizelgesi sürgüsünü sürükleyin. Animasyon döngüsünün %25, %50 veya herhangi bir noktasında tam olarak ne olduğunu görün. Sürüklerken sayfa gerçek zamanlı olarak güncellenir.
Tek tek animasyonları bağımsız olarak duraklatın, oynatın veya hızını ayarlayın. Tek bir animasyonu izole ederek onu sayfadaki diğer hareketli öğeler tarafından dikkati dağılmadan ayıklayın.
Tam CSS bildirimini görmek için listedeki herhangi bir animasyona tıklayın — @keyframes tanımı, animasyon kısaltma ayrıştırması, hesaplanmış başlangıç ve bitiş durumları ve hangi öğelere uygulandığı.
Animasyon Denetçisi covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewKesintinin veya sarsıntının tam olarak nerede meydana geldiğini belirlemek için bir animasyonu 0.25x'e yavaşlatın. Sorunun düzen zorlanmasından (transform yerine width/height animasyonu), yanlış yumuşatmadan veya aynı öğedeki çakışan animasyonlardan kaynaklanıp kaynaklanmadığını kontrol edin.
Cubic-bezier yumuşatma eğrinizin pratikte nasıl göründüğünü görmek için zaman çizelgesi sürüklemesini kullanın. Belirli yüzdelerde ease-in ve ease-out davranışını karşılaştırın. Hareket doğru hissedilene kadar değerleri ayarlayın ve tekrar oynatın.
Etkileyici animasyonlara sahip bir web sitesini (açılış sayfaları, portföy siteleri) ziyaret edin ve tam olarak nasıl oluşturulduklarını inceleyin. Karmaşık sekansların çalışmasını sağlayan @keyframes tanımlarını, zamanlama değerlerini ve öğe hedeflemelerini görün.
Hover efektlerinin, yükleme spinner'larının, iskelet ekranlarının ve sayfa geçişlerinin doğru davrandığını doğrulayın. Öğelerin üst üste binmesi, animasyon sırasında yanlış z-index veya içeriğin yeniden akışı gibi görsel aksaklıkları kontrol etmek için orta durumlarda duraklatın.
Vestibüler bozuklukları olan kullanıcılar için sorun yaratabilecek animasyonları belirleyin. Tüm animasyonları duraklatarak ve sayfanın tamamen işlevsel kalıp kalmadığını görerek prefers-reduced-motion'ın uygun şekilde dikkate alınıp alınmadığını kontrol edin.
DevSuite Pro yüzen yuvasını açın ve Animasyon Denetçisi simgesine tıklayın. Araç sayfayı hemen tarar ve çalışan tüm CSS animasyonlarını ve geçişlerini algılar.
Sayfada bulunan her animasyonu listeleyen yüzen bir panel görünür. Her giriş animasyon adını, süreyi, yumuşatma işlevini ve şu anda çalışıp çalışmadığını veya duraklatılıp duraklatılmadığını gösterir. Sayaç rozeti, algılanan toplam animasyon sayısını gösterir.
Tüm animasyonları aynı anda dondurmak için global Duraklat düğmesine tıklayın. Öğeler mevcut animasyon ortası durumunda kalır ve CSS özelliklerini incelemenize, ekran görüntüsü almanıza veya konumları karşılaştırmanıza olanak tanır.
Animasyonları ayrıntılı gözlem için 0.25x'e yavaşlatmak veya uzun animasyonlarda hızlıca dönmek için 4x'e hızlandırmak için hız seçiciyi kullanın. Hız değişiklikleri yeniden başlatmadan anında uygulanır.
Animasyondan manuel olarak geçmek için zaman çizelgesi sürgüsünü sola ve sağa sürükleyin. Sayfa gerçek zamanlı olarak güncellenir ve size her karenin tam olarak nasıl göründüğünü gösterir. Aksaklıkları tespit etmek veya yumuşatma eğrilerini doğrulamak için mükemmeldir.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.