Chrome Geliştirici Araçları Animasyonlar çekmecesi sekmesiyle animasyonları inceleyin ve değiştirin.
Genel bakış
Animasyonları yakalamak için Animasyonlar sekmesini açın. Animasyonları otomatik olarak algılar ve gruplar halinde sıralar.
Animasyonlar sekmesinin iki temel amacı vardır:
- Animasyonları inceleme. Bir animasyon grubunun kaynak kodunu yavaşlatın, yeniden oynatın veya inceleyin.
- Animasyonlarda değişiklik yapma Bir animasyon grubunun zamanlamasını, gecikmesini, süresini veya animasyon karesi ofsetlerini değiştirin. Animasyon karesi ve Bezier düzenlemesi desteklenmez.
Animasyonlar sekmesi CSS animasyonlarını, CSS geçişlerini, web animasyonlarını ve View Transitions API'yi destekler.
requestAnimationFrame
animasyonları henüz desteklenmiyor.
Animasyon grubu nedir?
Animasyon grubu, birbiriyle ilişkili görünen bir dizi animasyondur.
Şimdilik web'de gerçek bir grup animasyonu kavramı yoktur, bu nedenle hareket tasarımcıları ve geliştiricileri tek tek animasyonlar oluşturup tek bir tutarlı görsel efekt olarak görünmeleri için animasyonlar oluştururlar. Animasyonlar sekmesi, ilgili animasyonları başlangıç zamanına göre (gecikmeler hariç) tahmin eder ve yan yana gruplandırır.
Diğer bir deyişle, Animasyonlar sekmesi aynı komut dosyası bloğunda tetiklenen animasyonları gruplandırır. Ancak eşzamansızsalar, farklı gruplar halinde sonuçlanırlar.
Başlayın
Animasyonlar sekmesini iki şekilde açabilirsiniz:
Geliştirici Araçları'nı özelleştirin ve kontrol edin > Diğer araçlar > Animasyonlar'ı seçin.
Aşağıdakilerden birine basarak Komut Menüsü'nü açın:
- macOS'te: Command+Üst Karakter+P
- Windows, Linux veya ChromeOS'te: Control+Üst Karakter+P
Ardından
Show Animations
yazmaya başlayın ve ilgili Çekmece panelini seçin.
Varsayılan olarak, Animasyonlar sekmesi Konsol çekmecesinin yanında bir sekme olarak açılır. Çekmece sekmesi olarak, herhangi bir panelle kullanabilir veya DevTools'un en üstüne taşıyabilirsiniz.
Animasyonlar sekmesinde dört ana bölüm vardır:
- Denetimler. Buradan, yakalanan animasyon gruplarını engelleyebilir, yakalanan tüm animasyon gruplarını duraklatabilir, duraklatabilir veya play_arrow devam ettir ya da seçilen animasyon grubunun hızını değiştirebilirsiniz.
Genel Bakış. Simgelerle işaretlenmiş iki tür yakalanmış animasyon gruplarını gösterir: fare kaydırmaya dayalı ve plan normal (zamana dayalı).
İncelemek ve Ayrıntılar bölmesinde değiştirmek için buradan bir animasyon grubu seçin.
Zaman çizelgesi. Animasyon grubunun türüne bağlı olarak zaman çizelgesi şöyle olabilir:
- Fare kaydırmaya dayalı animasyonlar için piksel cinsinden.
- Zamana dayalı schedule animasyonları için milisaniye cinsinden.
Zaman çizelgesinde bir animasyonu tekrar oynatabilir, tekrar oynatabilir, ileri geri oynatabilir veya belirli bir noktaya atlayabilirsiniz.
Ayrıntılar. Seçilen animasyon grubunu inceleyin ve değiştirin.
Animasyon yakalamak için Animasyonlar sekmesi açıkken tetikleyin. Sayfa yükleme sırasında bir animasyon tetiklenirse animasyonu yeniden yükleyin.
Animasyonları inceleme
Bir animasyonu yakaladıktan sonra tekrar oynatmanın birkaç yolu vardır:
- Önizlemesini görüntülemek için Genel Bakış bölmesinde küçük resmin üzerine gelin.
- Görüntü alanı animasyonunu ileri geri oynatmak için video yer imlecini (kırmızı dikey çubuk) sürükleyin veya video yer imlecini belirli bir noktaya ayarlamak için Zaman Çizelgesi'nde herhangi bir yeri tıklayın. Animasyon, hâlihazırda oynatılıyorsa oynatılmaya devam eder, aksi takdirde durur.
- Animasyon grubunu Genel Bakış bölmesinden seçin (böylece Ayrıntılar bölmesinde görüntülenir) ve
Yeniden Oynat düğmesine basın. Animasyon, görüntü alanında tekrar oynatılır.
Seçili animasyon grubunun önizleme hızını değiştirmek için Kontroller çubuğundaki Animasyon hızı düğmelerini tıklayın.
Animasyon ayrıntılarını göster
Bir animasyon grubunu yakaladıktan sonra, ayrıntılarını görüntülemek için Genel Bakış bölmesinden animasyon grubunu tıklayın.
Ayrıntılar bölmesinde, her bir animasyon kendi satırı alır. Karşılık gelen öğenin adının tamamını görmek için ad sütununu yeniden boyutlandırın.
Görüntü alanında vurgulamak için bir animasyonun üzerine gelin. Animasyonu tıklayarak Öğeler panelinde seçin.
animation-iteration-count
özellikleri infinite
olarak ayarlanırsa bazı animasyonlar süresiz olarak tekrarlanır. Animasyonlar sekmesi, tanımlarını ve yinelemelerini görüntüler.
Animasyonun en soldaki ve daha koyu bölümü, tanımıdır. Sağdaki bölümler iterasyonları teyit ediyor.
Örneğin, bir sonraki ekran görüntüsünde, ikinci ve üçüncü bölümler birinci bölümün yinelemelerini temsil etmektedir.
![Animasyon yinelemeleri şeması.](https://developer.chrome.com/static/docs/devtools/css/animations/image/diagram-animation-iterat-82c9f85b419de.png?authuser=5&hl=tr)
İki öğeye aynı animasyon uygulanırsa Animasyonlar sekmesi, iki öğeye aynı rengi atar. Rengin kendisi rastgeledir ve hiçbir anlamı yoktur. Örneğin, aşağıdaki ekran görüntüsünde div.eye.left::after
ve div.eye.right::after
öğelerine div.feet::before
ve div.feet::after
öğelerinde olduğu gibi aynı animasyon (eyes
) uygulanmıştır.
![Renk kodlu animasyonlar.](https://developer.chrome.com/static/docs/devtools/css/animations/image/color-coded-animations-b834763e8f9d9.png?authuser=5&hl=tr)
Animasyonları değiştirme
Animasyonlar sekmesiyle bir animasyonu üç şekilde değiştirebilirsiniz:
- Animasyon süresi.
- Animasyon karesi zamanlamaları.
- Başlangıç zamanı gecikmesi.
Bu bölümde, bir sonraki ekran görüntüsünün orijinal animasyonu temsil ettiğini varsayalım:
Bir animasyonun süresini değiştirmek için ilk veya son daireyi sürükleyin.
Animasyon herhangi bir animasyon karesi kuralı tanımlıyorsa bunlar beyaz iç daireler olarak gösterilir. Animasyon karesinin zamanlamasını değiştirmek için bunlardan birini sürükleyin.
Bir animasyona gecikme eklemek için daireleri değil, animasyonun kendisini tıklayın, ardından herhangi bir yere sürükleyin.
Animasyon sırasında ::view-transition
sözde öğeyi düzenleme
View Transitions API ile DOM'yi tek bir adımda değiştirebilir ve iki durum arasında animasyonlu geçiş oluşturabilirsiniz. API, animasyon sırasında aşağıdaki yapıyla bir yapay öğe ağacı oluşturur:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
Bu yapıyı Öğeler > Stiller altında düzenlemek için:
- DevTools'u açın ve View Transitions API'yi kullanan bir sayfayı inceleyin. Örneğin, bu demo sayfası.
- Animasyonlar'da duraklat Duraklat'ı tıklayın.
Sayfada bir animasyonu tetikleyin. Animasyonlar paneli bunu yakalar ve hemen duraklar.
::view-transition
yapısını artık DOM'da,<head>
öğesinin üstünde bulabilirsiniz.Öğeler > Stiller bölümünde
::view-transition
sözde öğenin CSS'sini değiştirin.Sonucu görmek için animasyonu devam ettirin ve yeniden oynatın.
Daha fazla bilgi için View Transitions API ile sorunsuz ve basit geçişler başlıklı makaleye bakın.