Web Animations API, JavaScript'teki zorunlu animasyonları açıklamak için güçlü temel öğeler sağlar. Peki bu ne anlama geliyor? Google'ın demolar ve codelab'leri de dahil olmak üzere kullanabileceğiniz kaynaklar hakkında daha fazla bilgi edinin.
Arka plan
API, temelde Element.animate() yöntemini sağlar.
Arka plan rengini kırmızıdan yeşile çeviren bir örnek verelim.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Bu yöntem, mükemmel bir çoklu dolgu yedeğiyle (daha sonra bununla ilgili daha fazla bilgi) tüm modern tarayıcılarda desteklenir. Bu yöntem ve oynatıcı nesnesi için yerel destek, Chrome 39 kapsamında yaygın bir şekilde kullanılabilir hale geldi. Ayrıca, Opera'da yerel olarak kullanılabilir ve Firefox için etkin geliştirilme aşamasındadır. Bu, güçlü ve temel bir öğedir ve alet kutunuzda mutlaka bir yer bulmayı hak eder.
Codelab uygulamaları
Web Animations API için kod laboratuvarlarının sayısı giderek artmaktadır. Bunlar, API ile ilgili farklı kavramları gösteren rehbersiz kılavuzlardır. Bu codelab'lerin çoğunda statik içerik alıp animasyon efektleriyle geliştireceksiniz.
Bu codelab'ler ve ilgili bağlantılar ya da kaynaklar, Web Animasyonlarında kullanımınıza sunulan yeni temel öğeleri anlamak istiyorsanız başlamak için en iyi yerdir. Neler geliştirebileceğinize dair fikir edinmek için Android'den esinlenen bu gösterme efektine göz atın.
Henüz yeni başlıyorsanız, merak etmeyin, hiç düşünmeyin!
Demolar
İlham almak istiyorsanız kaynağın GitHub'da barındırıldığı, Materyallerden esinlenilmiş Web Animasyonları Demoları'na göz atmayı unutmayın. Bunlar, çeşitli harika efektleri gösterir ve her demonun kaynak kodunu satır içi olarak görüntüleyebilirsiniz.
Demolar arasında renkli dönen bir gökada, dönen Dünya ve hatta düz eski bir element üzerindeki çeşitli efektler yer alıyor.
Çoklu dolgu
Tüm modern tarayıcılarda mükemmel destek sağlamak için bir çoklu dolgu kitaplığı kullanabilirsiniz. Şu anda kullanılabilen bir çoklu dolgu olan Web Animations API'yi Internet Explorer, Firefox ve Safari gibi tüm modern tarayıcılarda kullanabilirsiniz.
Maceraya hevesliyseniz web animasyonlarının bir sonraki çoklu dolgusunu kullanabilirsiniz. Bu çoklu dolgu, birleştirilebilir GroupEffect ve SequenceEffect oluşturucu gibi henüz tamamlanmamış özellikleri de içerir.
İki çoklu dolgu arasındaki karşılaştırma için lütfen ana sayfaya bakın.
Çoklu dolguyu kodunuzda kullanmak için birkaç seçeneğiniz vardır.
cdnjs, jsDelivr gibi bir CDN kullanın veya rawgit.com aracılığıyla belirli bir sürümü hedefleyin
NPM veya Bower üzerinden yükle
$ npm install web-animations-js $ bower install web-animations-js ```
Her durumda, çoklu dolguyu başka herhangi bir koddan ö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 lütfen W3C spesifikasyonuna göz atın.
Dan Wilson, yeni CSS motion-path mülküyle birlikte nasıl kullanılacağı da dahil olmak üzere Web Animasyonları hakkında birçok yayın yazdı.
motion-path kullanan bazı örnekler için Eric Willigers'ın dokümanını inceleyin.