Native ondersteuning voor webanimaties werd voor het eerst geïntroduceerd in Chrome 36 en is bijgewerkt met afspeelcontrole in Chrome 39. De methode Element.animate() kan worden gebruikt om imperatieve animaties rechtstreeks vanuit JavaScript te activeren, en het geretourneerde object kan worden gebruikt om de weergave van deze animaties te regelen. Deze methoden worden gedetailleerd beschreven in de huidige versie van de W3C-specificatie voor webanimaties .
Er is een meegeleverde polyfill in ontwikkeling die alle functies voor webanimaties standaard implementeert en die in alle moderne browsers wordt ondersteund. Deze kernmethoden zijn nu klaar voor gebruik en verdienen een plek in uw toolbox voor het bouwen van rijke ervaringen die profiteren van animaties (zoals voor de Google I/O 2015 webapp ).
Constructor- en groepswijzigingen
De Web Animations-specificatie beschrijft ook groepen en sequenties , en constructors voor animaties en spelers. Deze zijn beschikbaar in de polyfill web-animations-next , die is ontworpen om functies te tonen die nog in discussie zijn en nog niet native geïmplementeerd zijn. Naar aanleiding van feedback van ontwikkelaars heeft het team dat Web Animations ontwikkelt deze functies een nieuwe naam gegeven, zodat ze meer voor de hand liggen.
De FXTF kwam onlangs bijeen in Sydney, Australië, en besprak de naamgeving . Een aantal ontwikkelaars had terechte opmerkingen gemaakt over de verwarrende naamgeving. Als resultaat hiervan werden de volgende naamswijzigingen overeengekomen:
- Animatie wordt KeyframeEffect
- AnimationSequence wordt SequenceEffect
- AnimationGroup wordt GroupEffect
- AnimationPlayer wordt Animation
Houd er rekening mee dat animaties en hun spelers weliswaar standaard beschikbaar zijn in Chrome en als onderdeel van de polyfill, maar dat ze momenteel rechtstreeks worden gemaakt via de methode Element.animate() . Bestaande code die de methode Element.animate() gebruikt, hoeft niet te worden aangepast.
De nieuwe namen geven het gedrag van elk object nauwkeuriger weer. KeyframeEffect beschrijft bijvoorbeeld keyframe-gebaseerde effecten die HTML-elementen kunnen targeten. Het nieuwe Animation object daarentegen vertegenwoordigt een animatie in een van de vele statussen (zoals afspelen, pauzeren, enz.).
BronCodeEffect
Als je delen van de conceptspecificatie gebruikt via de web-animations-next polyfill, moet je je code binnen de verouderingsperiode bijwerken om deze nieuwe namen te integreren. Conform het beleid voor polyfill-wijzigingen streven we ernaar om een oude versie drie maanden te ondersteunen en een consolewaarschuwing te geven als je site verouderde functies of namen gebruikt.
Als je deze functies wilt uitproberen, houd dan de v2-release van de polyfill in de gaten om van deze nieuwe namen te profiteren. Abonneer je ten slotte op de web-animations-changes- groep om op de hoogte te blijven van eventuele andere wijzigingen.