Web Animations API, JavaScript'teki zorunlu animasyonları açıklamak için güçlü temel öğeler sağlar. Peki bu ne anlama gelir? Google'ın demoları ve codelab'leri de dahil olmak üzere kullanabileceğiniz kaynaklar hakkında bilgi edinin.
Arka plan
API, temelde Element.animate() yöntemini sağlar.
Arka plan rengini kırmızıdan yeşile çeviren bir örnek inceleyelim.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Bu yöntem, mükemmel bir çoklu dolgu yedeğiyle tüm modern tarayıcılarda desteklenir (daha sonra bununla ilgili daha fazla bilgi verilecektir). Bu yöntem ve oynatıcı nesnesi için yerel destek ve Chrome 39'un bir parçası olarak yaygın şekilde kullanıma sunuldu. Opera'da yerel olarak da kullanılabilir ve Firefox için etkin geliştirme aşamasındadır. Bu, alet çantanızda bir yeri hak eden güçlü bir temel öğedir.
Codelab uygulamaları
Web Animasyonları API'si için giderek artan sayıda codelab'i kullanabilirsiniz. Bunlar, API'de farklı kavramları gösteren yönlendirmesiz öğrenim kılavuzlarıdır. Bu codelab'lerin çoğunda statik içerik alıp animasyon efektleriyle geliştireceksiniz.
Web Animasyonlarında kullanabileceğiniz yeni temel öğeleri anlamak istiyorsanız bu codelab'ler ve ilgili bağlantılar veya kaynaklar başlangıç için en iyi yerdir. Ne oluşturabileceğinize dair bir fikir edinmek için Android'den esinlenen bu açma efektine göz atın:
Bu yüzden, yeni başlıyorsanız başka yere gitmeyin!
Demolar
İlham almak istiyorsanız kaynakların GitHub'da barındırıldığı Materyal esintili Web Animasyonları Demoları'na mutlaka göz atın. Bunlar, birbirinden güzel çeşitli efektler gösterir ve her demonun kaynak kodunu satır içinde görüntüleyebilirsiniz.
Demolar, renkli dönen bir galaksi, dönen Dünya ve hatta, eski bir element üzerinde çeşitli efektler içeriyor.
Çoklu Dolgu
Tüm modern tarayıcılarda mükemmel destek sağlamak için polyfill kitaplığı kullanabilirsiniz. Web Animations API, onu Internet Explorer, Firefox ve Safari gibi tüm modern tarayıcılara getiren şu anda kullanılabilen bir çoklu dolgu özelliğine sahip.
Maceraya düşkün hissediyorsanız, composable GroupEffect ve SequenceEffect oluşturucuları gibi henüz son haline getirilmemiş özellikleri de içeren web animasyonları sonraki çoklu dolgu özelliğini kullanabilirsiniz.
İki çoklu dolgu arasındaki karşılaştırma için lütfen ana sayfaya bakın.
Kodunuzda çoklu dolgudan herhangi birini kullanmak için birkaç seçeneğiniz vardır.
cdnjs ve jsDelivr gibi bir CDN kullanın veya rawgit.com üzerinden belirli bir sürümü hedefleyin
NPM veya Bower ile yükleme
$ npm install web-animations-js $ bower install web-animations-js ```
Her durumda, polyfill'i bir komut dosyası etiketine diğer herhangi bir koddan önce eklemeniz yeterlidir.
<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 spesifikasyonlarına göz atın.
Dan Wilson ayrıca, yeni CSS motion-path mülkü ile birlikte nasıl kullanılacağı da dahil olmak üzere Web Animasyonları ile ilgili çok sayıda yayın yazdı.
motion-path kullanan bazı örnekler için Eric Willigers'ın dokümanına göz atın.