Web Animasyonları API'si, JavaScript'den zorunlu animasyonları tanımlamak için güçlü primitifler sağlar. Peki bu ne anlama geliyor? Google'ın demo'ları ve codelab'leri dahil olmak üzere kullanabileceğiniz kaynaklar hakkında bilgi edinin.
Arka plan
API temel olarak Element.animate() yöntemini sağlar.
Arka plan renginin kırmızıdan yeşile animasyonla değiştiği bir örneği inceleyelim.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Bu yöntem, mükemmel bir polyfill yedeğiyle (daha sonra bu konu hakkında daha fazla bilgi verilecektir) tüm modern tarayıcılarda desteklenir. Bu yöntem ve oynatıcı nesnesi için yerel destek, Chrome 39'un bir parçası olarak yaygın olarak kullanıma sunuldu. Opera'da yerleşik olarak da kullanılabilir ve Firefox için aktif geliştirme aşamasındadır. Bu, araç kutunuzda yer almayı hak eden güçlü bir primitiftir.
Codelab uygulamaları
Web Animasyonları API'si için giderek artan sayıda kod laboratuvarı mevcuttur. Bunlar, API'deki farklı kavramları gösteren kendi kendine ilerleyen kılavuzlardır. Bu codelab'lerin çoğunda, statik içeriği animasyon efektleriyle geliştireceksiniz.
Web Animasyonlar'da kullanabileceğiniz yeni temel öğeleri anlamak istiyorsanız bu kod laboratuvarlarını ve ilgili bağlantıları ya da kaynakları incelemeye başlamak en iyi seçenektir. Ne tür bir içerik oluşturabileceğiniz hakkında fikir edinmek için Android'den ilham alan bu açıklama efektine göz atın:
Yeni başlıyorsanız doğru yerdesiniz.
Demolar
İlham almak istiyorsanız GitHub'da barındırılan kaynak kodunun yer aldığı, Materyal'den ilham alan Web Animasyon Demoları'na göz atın. Bu örneklerde çeşitli şaşırtıcı efektler gösterilmektedir ve her bir demonun kaynak kodunu satır içi olarak görüntüleyebilirsiniz.
Demolarda dönen renkli bir galaksi, dönen bir Dünya veya eski bir öğe üzerinde çeşitli efektler yer alır.
Çoklu dolgu
Tüm modern tarayıcılarda mükemmel destek sağlamak için bir çoklu doldurma kitaplığı kullanabilirsiniz. Web Animations API'nin, Internet Explorer, Firefox ve Safari dahil tüm modern tarayıcılarda kullanılmasını sağlayan şu anda kullanılabilen bir polyfill vardır.
Maceraperverseniz henüz tamamlanmamış özellikler (ör. birleştirilebilir GroupEffect ve SequenceEffect kurucuları) de içeren web-animations-next polyfill'i kullanabilirsiniz.
İki polyfill'i karşılaştırmak için lütfen ana sayfaya bakın.
Kodunuzda bu polyfill'leri kullanmanın birkaç yolu vardır.
cdnjs, jsDelivr gibi bir CDN kullanın veya rawgit.com üzerinden belirli bir sürümü hedefleyin
NPM veya Bower üzerinden yükleme
$ npm install web-animations-js $ bower install web-animations-js ```
Her durumda, diğer kodlardan önce bir komut dosyası etiketine polyfill ekleyebilirsiniz.
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Diğer kaynaklar
Daha teknik bir giriş okumak isterseniz lütfen W3C spesifikasyonuna göz atın.
Dan Wilson, yeni CSS motion-path mülkü ile birlikte nasıl kullanılacağı da dahil olmak üzere Web Animasyonları hakkında harika bir yazı dizisi de yazdı.
motion-path kullanan bazı örnekler için Eric Willigers'in dokümanlarına göz atın.