De Web Animations API biedt krachtige primitieven om imperatieve animaties uit JavaScript te beschrijven - maar wat houdt dat in? Ontdek welke bronnen er voor u beschikbaar zijn, waaronder de demo's en codelabs van Google.
Achtergrond
De kern van de API is de Element.animate() methode. Laten we een voorbeeld bekijken, dat de achtergrondkleur van rood naar groen animeert.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Deze methode wordt ondersteund in alle moderne browsers, met een uitstekende polyfill-fallback (daarover later meer). Native ondersteuning voor deze methode – en het bijbehorende spelerobject – is breed beschikbaar sinds Chrome 39. Het is ook standaard beschikbaar in Opera en wordt actief ontwikkeld voor Firefox. Dit is een krachtige primitive die een plekje in je gereedschapskist verdient.
Codelabs
Er is een groeiend aantal codelabs beschikbaar voor de Web Animations API . Dit zijn zelfstudiegidsen die verschillende concepten in de API demonstreren. In de meeste van deze codelabs neem je statische content en verrijk je deze met animatie-effecten.
Deze codelabs en gerelateerde links of bronnen zijn de beste plek om te beginnen als je de nieuwe primitieven in webanimaties wilt leren kennen. Bekijk dit door Android geïnspireerde onthullingseffect voor een idee van wat je kunt bouwen.
Bent u nog maar net begonnen? Dan hoeft u niet verder te zoeken!
Demo's
Als je op zoek bent naar inspiratie, bekijk dan zeker de Material-inspired Web Animations Demos , waarvan de broncode gehost wordt op GitHub . Deze demo's demonstreren een scala aan verbluffende effecten en je kunt de broncode van elke demo inline bekijken.
De demo's bevatten onder andere een kleurrijk draaiend sterrenstelsel , een roterende Aarde of zelfs verschillende effecten op een eenvoudig element.
Polyfill
Voor optimale ondersteuning in alle moderne browsers kunt u een polyfill-bibliotheek gebruiken. De Web Animations API heeft nu een polyfill beschikbaar die deze beschikbaar maakt voor alle moderne browsers, waaronder Internet Explorer, Firefox en Safari.
Als je je avontuurlijk voelt, kun je de web-animations-next polyfill gebruiken. Deze bevat ook functies die nog niet zijn afgerond, zoals de samenstelbare constructors GroupEffect en SequenceEffect . Zie de homepage voor een vergelijking tussen de twee polyfills.
U hebt een paar opties om polyfill in uw code te gebruiken.
Gebruik een CDN, zoals cdnjs , jsDelivr , of richt je op een specifieke release via rawgit.com
Installatie via NPM of Bower
$ npm install web-animations-js $ bower install web-animations-js ```
In alle gevallen kunt u de polyfill eenvoudig in een scripttag opnemen 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>
Andere bronnen
Als u een meer technische introductie wilt lezen, raadpleeg dan de W3C-specificatie .
Dan Wilson heeft ook een aantal geweldige artikelen geschreven over webanimaties , waaronder hoe je deze kunt gebruiken in combinatie met de nieuwe CSS-eigenschap motion-path . Bekijk de documentatie van Eric Willigers voor voorbeelden van motion-path .