Web Animations API, JavaScript'ten zorunlu animasyonları tanımlamak için güçlü temel öğeler sağlar. Peki bu ne anlama geliyor? Google'ın demoları ve codelab'leri dahil olmak üzere, kullanabileceğiniz kaynaklar hakkında bilgi edinin.
Arka plan
API'nin temelinde Element.animate() yöntemi bulunur.
Arka plan rengini kırmızıdan yeşile dönüştüren bir örneğe bakalım:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Bu yöntem, tüm modern tarayıcılarda desteklenir ve mükemmel bir polyfill geri dönüşü vardır (bu konuyla ilgili daha fazla bilgiyi sonraki bölümlerde bulabilirsiniz). Bu yöntem ve oynatıcı nesnesi için yerel destek, Chrome 39'un bir parçası olarak yaygın bir şekilde kullanıma sunuldu. Opera'da yerel olarak da kullanılabilir ve Firefox için aktif olarak geliştirilmektedir. Bu, araç kutunuzda yer almayı hak eden güçlü bir temeldir.
Codelab uygulamaları
Web Animations API için giderek daha fazla codelab kullanıma sunuluyor. Bunlar, API'deki farklı kavramları gösteren, kendi hızınızda ilerleyebileceğiniz kılavuzlardır. Bu codelab'lerin çoğunda statik içerikleri alıp animasyon efektleriyle zenginleştireceksiniz.
Web Animations'ta kullanabileceğiniz yeni temel öğeleri anlamak istiyorsanız bu codelab'ler ve ilgili bağlantılar ya da kaynaklar başlamak için en iyi yerdir. Ne tür bir efekt oluşturabileceğinizle ilgili fikir edinmek için Android'den ilham alan bu açığa çıkarma efektine göz atın:
Yeni başlıyorsanız doğru yerdesiniz.
Demolar
İlham almak istiyorsanız kaynağı GitHub'da barındırılan, Material'dan ilham alan Web Animations Demos'a göz atın. Bu demolar, çeşitli muhteşem efektleri gösterir ve her demoya ait kaynak kodunu satır içi olarak görüntüleyebilirsiniz.
Demolar arasında renkli dönen bir galaksi, dönen bir Dünya veya sadece çeşitli efektler içeren basit bir öğe yer alıyor.
Polyfill
Tüm modern tarayıcılarda mükemmel destek sağlamak için çoklu doldurma kitaplığı kullanabilirsiniz. Web Animations API'nin, Internet Explorer, Firefox ve Safari dahil olmak üzere tüm modern tarayıcılarda kullanılabilmesini sağlayan polyfill'i şu anda kullanıma sunulmuştur.
Kendinizi maceraya hazır hissediyorsanız henüz son hâlini almamış özellikler (ör. birleştirilebilir GroupEffect ve SequenceEffect oluşturucular) içeren web-animations-next polyfill'ini kullanabilirsiniz.
İki polyfill arasındaki karşılaştırma için ana sayfayı inceleyin.
Kodunuzda polyfill kullanmak için birkaç seçeneğiniz vardır.
cdnjs veya jsDelivr gibi bir CDN kullanın ya da rawgit.com üzerinden belirli bir sürümü hedefleyin.
NPM veya Bower kullanarak yükleme
$ npm install web-animations-js $ bower install web-animations-js ```
Her durumda, polyfill'i diğer kodlardan önce bir komut dosyası etiketine 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 W3C spesifikasyonuna göz atın.
Dan Wilson, Web Animasyonları hakkında harika bir dizi gönderi de yazdı. Bu gönderilerde, yeni CSS motion-path özelliğinin yanı sıra bu özelliğin nasıl kullanılacağı da anlatılıyor.
motion-path kullanılan bazı örnekler için Eric Willigers'ın dokümanına göz atın.