De Web Animations API biedt krachtige primitieven om imperatieve animaties vanuit JavaScript te beschrijven - maar wat betekent dat? Ontdek welke bronnen voor u beschikbaar zijn, waaronder de demo's en codelabs van Google.
Achtergrond
In de kern biedt de API de methode Element.animate() . Laten we een voorbeeld bekijken, waarbij 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 geweldige polyfill-fallback (daarover later meer). Native ondersteuning voor deze methode (en het bijbehorende spelerobject) werd algemeen beschikbaar als onderdeel van Chrome 39 . Het is ook standaard beschikbaar in Opera en wordt actief ontwikkeld voor Firefox. Dit is een krachtige primitief die een plaatsje in je gereedschapskist verdient.
Codelabs
Er is een groeiend aantal codelabs beschikbaar voor de Web Animations API . Dit zijn handleidingen op eigen tempo die verschillende concepten in de API demonstreren. In de meeste van deze codelabs gebruik je statische inhoud en verbeter je deze met animatie-effecten.
Deze codelabs en gerelateerde links of bronnen zijn absoluut de beste plaats om te beginnen als u de nieuwe primitieven die voor u beschikbaar zijn in Webanimaties wilt begrijpen. Voor een idee van wat je zou kunnen bouwen, bekijk dit op Android geïnspireerde onthullingseffect:
Dus als je net begint, zoek dan niet verder!
Demo's
Als je op zoek bent naar inspiratie, bekijk dan zeker de op materiaal geïnspireerde webanimatiedemo's , waarvan de bron wordt gehost op GitHub . Deze demonstreren een verscheidenheid aan verbazingwekkende effecten en u kunt de broncode van elke demo inline bekijken.
De demo's omvatten een kleurrijk draaiend sterrenstelsel , een roterende aarde , of zelfs gewoon een verscheidenheid aan effecten op een gewoon oud element.
Polyvulling
Om goede ondersteuning in alle moderne browsers te garanderen, kunt u een polyfill-bibliotheek gebruiken. De Web Animations API heeft momenteel een polyfill beschikbaar die deze naar alle moderne browsers brengt, inclusief Internet Explorer, Firefox en Safari.
Als u avontuurlijk ingesteld bent, kunt u de polyfill web-animations-next gebruiken, die ook functies bevat die nog moeten worden afgerond, zoals de samenstelbare GroupEffect en SequenceEffect constructors. Voor een vergelijking tussen de twee polyfills, zie de homepage .
Als u polyfill in uw code wilt gebruiken, heeft u een paar opties.
Gebruik een CDN, zoals cdnjs , jsDelivr , of target een specifieke release via rawgit.com
Installeer via NPM of Bower
$ npm install web-animations-js $ bower install web-animations-js ```
In alle gevallen kunt u eenvoudigweg de polyfill in een scripttag opnemen vóór enige 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 je een meer technische introductie wilt lezen, bekijk dan de W3C-specificatie .
Dan Wilson heeft ook een groot aantal artikelen over webanimaties geschreven, onder meer over het gebruik ervan naast de nieuwe CSS motion-path eigenschap . Voor enkele voorbeelden van het gebruik van motion-path , bekijk het document van Eric Willigers .