İlk olarak Chrome 36'da yayınlanan Web Animations API, tarayıcıdaki animasyonların kullanışlı JavaScript kontrolünü sağlar. Ayrıca Gecko ve WebKit'te de uygulanmaktadır.
Chrome 50'de, diğer tarayıcılarla birlikte çalışabilirliği iyileştirmek ve spesifikasyonla daha uyumlu olmak için bazı değişiklikler yapıldı. Bu değişiklikler şunlardır:
- Etkinlikleri iptal et
Animation.idpause()yöntemi için durum değişikliği- Animasyon karelerinde anahtar olarak kesik çizgili adların desteğinin sonlandırılması
Chrome 51'de bu değişikliklerden bazıları kesinleşti:
- Animasyon karelerinde anahtar olarak kesik çizgili adları kaldırma
Etkinlikleri iptal et
Animasyon arayüzü, cancel() olarak adlandırılan eğlenceli bir animasyon iptali yöntemi içerir.
Chrome 50, yöntem spesifikasyona göre çağrıldığında iptal etkinliğinin tetiklenmesini sağlar. Bu yöntem, başlatılmışsa etkinlik işlemeyi oncancel özelliği aracılığıyla tetikler.
Animation.id için destek
element.animate()
kullanarak bir animasyon oluşturduğunuzda,
bazı özellikleri aktarabilirsiniz. Örneğin, bir nesne üzerinde opaklığın
animasyonuna dair bir örneği aşağıda görebilirsiniz:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
id özelliği belirtilirse bu özellik, döndürülen Animasyon nesnesinde ayarlanır. Bu, ilgilenmeniz gereken çok sayıda Animasyon nesnesi olduğunda içeriğinizde hata ayıklamanıza yardımcı olabilir. Örneklediğiniz bir animasyon için id öğesinin nasıl belirtileceğine dair bir örnek:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
duraklatma() yöntemi için durum değişikliği
pause() yöntemi, devam eden bir animasyonu duraklatmak için kullanılır. Animasyonun durumunu playState özelliğini kullanarak kontrol ederseniz paused() yöntemi çağrıldıktan sonra durum paused olarak ayarlanmalıdır. 50'den önceki Chrome sürümlerinde animasyon henüz başlatılmamışsa playState özelliğinde idle değeri gösteriliyordu. Ancak artık paused olan doğru durumu yansıtıyor.
Animasyon karelerinde anahtar olarak kesik çizgili adları kaldırma
Chrome 50, spesifikasyonlara ve diğer uygulamalara daha da uymak için animasyon karesi animasyonlarındaki anahtarlar için kesik çizgili adlar kullanılması halinde konsola bir uyarı gönderir. Kullanılması gereken doğru dizeler, CSS özelliği ve IDL özelliği dönüşüm algoritmasına göre deve büyük yazı isimleridir.
Örneğin, margin-left CSS özelliği, marginLeft anahtarını anahtar olarak iletmenizi gerektirir.
Chrome 51'de kesik çizgili adlar için destek tamamen kaldırıldı. Bu nedenle, mevcut içerikleri spesifikasyona göre doğru adlandırmayla düzeltmek için şimdi iyi bir zaman.
Özet
Bu değişiklikler, Chrome'un Web Animasyonları uygulamasını diğer tarayıcı uygulamalarına yaklaştırır ve spesifikasyonla daha uyumlu hale getirir. Tüm bunlar, daha iyi birlikte çalışabilirlik için web sayfası içeriği yazma sürecini basitleştirir.