De Web Animations API biedt krachtige basiscomponenten om imperatieve animaties vanuit JavaScript te beschrijven, maar wat houdt dat precies in? Ontdek welke bronnen er beschikbaar zijn, waaronder de demo's en codelabs van Google.
Achtergrond
De API biedt in de kern de Element.animate() methode. Laten we een voorbeeld bekijken, waarin de achtergrondkleur van rood naar groen wordt geanimeerd.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Deze methode wordt ondersteund in alle moderne browsers, met een uitstekende polyfill als fallback (daarover later meer). Native ondersteuning voor deze methode – en het bijbehorende player-object – werd breed beschikbaar in Chrome 39. Het is ook standaard beschikbaar in Opera en wordt actief ontwikkeld voor Firefox. Dit is een krachtige primitieve die een plek in je gereedschapskist verdient.
Codelabs
Er is een groeiend aantal codelabs beschikbaar voor de Web Animations API . Dit zijn zelfstudiehandleidingen die verschillende concepten van de API demonstreren. In de meeste van deze codelabs ga je aan de slag met statische content en voeg je daar animatie-effecten aan toe.
Deze codelabs , en de bijbehorende links of bronnen, zijn de allerbeste plek om te beginnen als je de nieuwe basisfunctionaliteiten voor webanimaties wilt leren kennen. Om een idee te krijgen van wat je zou kunnen bouwen, kun je dit op Android geïnspireerde onthullingseffect bekijken.
Dus als je net begint, hoef je niet verder te zoeken!
Demo's
Als je inspiratie zoekt, bekijk dan zeker de Material Design-geïnspireerde webanimatiedemo's , waarvan de broncode op GitHub staat. Deze demonstreren een verscheidenheid aan verbluffende effecten en je kunt de broncode van elke demo direct bekijken.
De demo's omvatten onder andere een kleurrijk draaiend sterrenstelsel , een roterende aarde , of gewoon een verscheidenheid aan effecten op een doodgewoon element.
Polyfill
Om optimale ondersteuning in alle moderne browsers te garanderen, kunt u een polyfill-bibliotheek gebruiken. De Web Animations API heeft momenteel een polyfill beschikbaar die compatibel is met alle moderne browsers, waaronder Internet Explorer, Firefox en Safari.
Als je avontuurlijk bent ingesteld, kun je de web-animations-next polyfill gebruiken, die ook functies bevat die nog moeten worden afgerond, zoals de combineerbare GroupEffect en SequenceEffect constructors. Voor een vergelijking tussen de twee polyfills, zie de homepage .
Om een van beide polyfills in je code te gebruiken, heb je een aantal opties.
Gebruik een CDN, zoals cdnjs of jsDelivr , of richt je op een specifieke release via rawgit.com.
Installeren via NPM of Bower
$ npm install web-animations-js $ bower install web-animations-js ```
In alle gevallen kunt u de polyfill eenvoudigweg in een script-tag plaatsen vóór alle andere code.
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Overige bronnen
Als je een meer technische inleiding wilt lezen, raadpleeg dan de W3C-specificatie .
Dan Wilson heeft ook een aantal geweldige artikelen geschreven over webanimaties , waaronder over hoe je deze kunt gebruiken in combinatie met de nieuwe CSS-eigenschap ` motion-path . Voor enkele voorbeelden van het gebruik van motion-path kun je de documentatie van Eric Willigers bekijken.