İlk olarak Chrome 36'da kullanıma sunulan Web Animasyonlar API'si, tarayıcıdaki animasyonlar için uygun JavaScript kontrolü sağlar ve Gecko ile WebKit'te de uygulanmaktadır.
Chrome 50, diğer tarayıcılarla birlikte çalışabilirliği iyileştirmek ve spesifikasyona daha uygun olmak için değişiklikler içerir. Bu değişiklikler şunlardır:
- Etkinlikleri iptal etme
Animation.idpause()yöntemi için durum değişikliği- Animasyon karelerinde anahtar olarak kısa çizgili adların desteği sonlandırıldı
Chrome 51'de bu değişikliklerden bazıları kesinleşti:
- Animasyon karelerinde anahtar olarak kullanılan kısa çizgili adları kaldırma
Etkinlikleri iptal etme
Animasyon arayüzünde, animasyonları iptal etmek için kullanılan ve cancel() olarak adlandırılan ilginç bir yöntem bulunur.
Chrome 50, yöntem spesifikasyona uygun şekilde çağrıldığında iptal etkinliğinin tetiklenmesini uygular. Bu, başlatılmışsa oncancel özelliği aracılığıyla etkinlik işlemeyi tetikler.
Animation.id desteği
element.animate() kullanarak animasyon oluşturduğunuzda çeşitli özellikler iletebilirsiniz. Örneğin, bir nesnenin opaklığını animasyonlu olarak değiştirmeyle ilgili bir örnek aşağıda verilmiştir:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
id mülkünü belirttiğinizde, döndürülen Animation nesnesinde ayarlanır. Bu, çok sayıda Animation nesnesi kullanırken içeriğinizle ilgili hata ayıklamanıza yardımcı olabilir. Oluşturduğunuz bir animasyon için id değerini nasıl belirteceğinize dair bir örnek aşağıda verilmiştir:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
pause() yöntemi için durum değişikliği
pause()
yöntemi, devam eden bir animasyonu duraklatmak için kullanılır. playState özelliğini kullanarak animasyon durumunu kontrol ederseniz paused() yöntemi çağrıldıktan sonra paused olarak ayarlanır. 50'den önceki Chrome sürümlerinde, animasyon henüz başlamadıysa playState özelliği idle değerini gösterirdi. Ancak artık doğru durumu (paused) yansıtıyor.
Animasyon karelerinde anahtar olarak kullanılan kısa çizgili adları kaldırma
Chrome 50, spesifikasyona ve diğer uygulamalara daha fazla uymak için anahtar kare animasyonlarında anahtarlar için kısa çizgili adlar kullanılıyorsa konsola uyarı gönderir. Kullanılacak doğru dize, CSS özelliğinden IDL özelliğine dönüşüm algoritmasına göre büyük/küçük harf kullanımına duyarlı adlardır.
Örneğin, margin-left CSS özelliği için anahtar olarak marginLeft değerini iletmeniz gerekir.
Chrome 51, kısa çizgili adlar için desteği tamamen kaldırıyor. Bu nedenle, mevcut içerikleri spesifikasyona uygun şekilde doğru şekilde adlandırmak için şimdi tam zamanı.
Özet
Bu değişiklikler, Chrome'un Web Animasyonlarının diğer tarayıcılarda uygulanma şekline daha yakın ve spesifikasyona daha uygun hale getirilmesini sağlar. Bu sayede, daha iyi birlikte çalışabilirlik için web sayfası içeriklerinin oluşturulması basitleştirilir.