aframe
animatie
Zoeken…
Invoering
Animaties en overgangen in A-Frame worden gedefinieerd met het element <a-animation> als een kind. Het systeem is grofweg gebaseerd op de specificatie Webanimaties. A-Frame maakt intern gebruik van tween.js.
Opmerkingen
attributen
Hier is een overzicht van animatiekenmerken. We zullen hieronder meer in detail ingaan.
| Attribuut | Beschrijving | Standaardwaarde |
|---|---|---|
| attribuut | Kenmerk om te animeren. Gebruik de syntaxis van componentName.property (bijvoorbeeld light.intensity ) om een componentkenmerk op te geven. | omwenteling |
| beginnen | Naam van evenement waarop moet worden gewacht voordat met animatie wordt begonnen. | '' |
| vertraging | Vertraging (in milliseconden) of gebeurtenisnaam om op te wachten voordat de animatie begint. | 0 |
| richting | Richting van de animatie (tussen from en to ). Een van alternate , alternateReverse reverse , normal , reverse . | normaal |
| dur | Duur in (milliseconden) van de animatie. | 1000 |
| versoepeling | Gemakfunctie van de animatie. Er zijn er heel veel om uit te kiezen. | gemak |
| einde | Naam van evenement waarop moet worden gewacht voordat animatie wordt gestopt. | '' |
| vullen | Bepaalt het effect van animatie wanneer deze niet actief is in het spel. Een van backwards , both , forwards , none . | forwards |
| van | Startwaarde. | Huidige waarde. |
| herhaling | Aantal herhalen of indefinite . | 0 |
| naar | Waarde beëindigen. Moet worden gespecificeerd. | Geen |
Beginnen
Het kenmerk begin definieert wanneer de animatie moet worden afgespeeld.
Dit kan een getal zijn , dat staat voor te wachten milliseconden of een gebeurtenisnaam om op te wachten. We kunnen bijvoorbeeld een animatie definiëren die 2 seconden wacht voordat een entiteit wordt geschaald.
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
Of we kunnen een animatie definiëren die wacht tot het bovenliggende element een gebeurtenis met de naam fade activeert voordat een entiteit vervaagt.
<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>
// Trigger an event to begin fading.
document.querySelector('#fading-cube').emit('fade');
Richting
Het kenmerk direction definieert de manier waarop tussen de startwaarde en de eindwaarde moet worden geanimeerd.
Wanneer we een afwisselende richting definiëren, gaat de animatie heen en weer tussen de waarden from en to zoals een jojo. Afwisselende richtingen hebben alleen effect wanneer we de animatie herhalen.
| Waarde | Beschrijving |
|---|---|
| afwisselend | Op even genummerde cycli, animeren van from tot to . Op oneven genummerde cycli, animatie van to tot from |
| alternatieve achteruit | Op oneven genummerde cycli, animeren van from tot to . Op even genummerde cycli, animatie van to tot from |
| normaal | Animeer van from tot to . |
| omgekeerde | Animeer van to naar from . |
versoepeling
Het kenmerk easing definieert de versnellingsfunctie van de animatie, die standaard wordt ingesteld op ease . Er zijn te veel versoepelfuncties om op te noemen, maar we kunnen ze impliciet verklaren.
Een mogelijke waarde is linear . En de belangrijkste versoepelfuncties zijn ease , ease-in , ease-out en ease-in-out .
Dan zijn er meer groepen versnellingsfuncties. Bovenstaande basis-versnellingsfuncties worden voorafgegaan door elke groep versnellingsfuncties. De groepen versoepelingsfuncties zijn cubic , quad , quart , quint , sine , expo , circ , elastic , back en bounce .
De cubic groep versoepelfuncties zou bijvoorbeeld bestaan uit ease-cubic , ease-in-cubic , ease-out-cubic , ease-in-out-cubic .
Vullen
Het fill definieert het effect van animatie wanneer deze niet actief is in het spel. Denk aan fill als welke waarden de animatie voor en / of na elke animatiecyclus op de entiteit instelt. Hieronder staan de mogelijke waarden voor fill en hun effecten.
| Waarde | Beschrijving |
|---|---|
| achteruit | Voordat de animatie wordt gestart, stelt de startwaarde naar het from waarde. |
| beide | Combineer de effecten van zowel achterwaarts vullen als voorwaarts vullen. |
| forwards | Na de animatie is voltooid, zal de uiteindelijke waarde verblijf in het to waarde. De standaard vulling. |
| geen | Voordat de animatie begint, stelt u de startwaarde in op de beginwaarde. Nadat de animatie is voltooid, stelt u de waarde opnieuw in op de beginwaarde. |
Herhaling
Het repeat definieert hoe vaak de animatie wordt herhaald. We noemen elke herhaling van de animatie een cyclus. Herhalen kan een getal zijn dat aftelt bij elke animatiecyclus totdat het 0 bereikt op welk punt de animatie eindigt, of we kunnen repeat op indefinite en de animatie zal continu worden herhaald totdat de animatie handmatig wordt verwijderd of gestopt.
EVENEMENTEN
Het element <a-animation> zendt een aantal gebeurtenissen uit.
| Evenement naam | Beschrijving |
|---|---|
| animationend | Wordt uitgezonden wanneer de animatie is voltooid. In het geval van herhalingen, uitgezonden wanneer het aantal herhalingen 0 bereikt. Niet uitgezonden voor onbepaalde herhalingen. |
| animationstart | Wordt onmiddellijk verzonden wanneer de animatie begint te spelen. |
Voorbeeld animaties
Als een inleidend voorbeeld, om een baan van 5 meter op een entiteit om de Y-as te definiëren die 10 seconden duurt, kunnen we de positie compenseren en de rotatie animeren. Deze animatie begint met de eerste rotatie om de Y-as van 0 graden en gaat rond 360 graden. Het wordt gedefinieerd met een duur van 10000 milliseconden, behoudt de uiteindelijke waarde voor elke cyclus van de animatie en loopt oneindig.
<a-entity position="5 0 0" rotation="0 0 0">
<a-animation attribute="rotation"
to="0 360 0"
dur="10000"
fill="forwards"
repeat="indefinite"></a-animation>
</a-entity>
Verschillende soorten eigenschappen animeren
Het animatiesysteem van A-Frame kan verschillende soorten eigenschappen animeren.
vec3 eigenschappen
A-Frame heeft standaard vec3 componenten (dwz position , rotation en scale ). Deze componenten bestaan uit drie factoren: X, Y en Z. We kunnen drie door spaties gescheiden getallen doorgeven aan de from en to attributen, net zoals we ze zouden definiëren voor een entiteit. In dit geval gaat het animatiesysteem ervan uit dat we een vec3 waarde animeren.
Als we bijvoorbeeld een entiteit van de ene naar de andere plek willen animeren, kunnen we de position animeren.
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
Booleaanse eigenschappen
A-Frame heeft standaardcomponenten die een enkele Booleaanse waarde accepteren. Booleaanse waarden kunnen ook worden "geanimeerd" door de Booleaanse waarden aan het einde van elke animatiecyclus om te draaien.
We kunnen bijvoorbeeld een animatie definiëren die de zichtbaarheid van een entiteit na 5 seconden uitschakelt.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
Numerieke eigenschappen
We kunnen ook numerieke attributen animeren. We kunnen bijvoorbeeld de intensiteit van de primitieve lichtanimatie animeren.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
Kleureigenschappen
We kunnen elke componenteigenschap met een kleurtype animeren. We kunnen bijvoorbeeld een doos animeren van wit naar rood.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
Component eigenschappen
We kunnen een bepaalde eigenschap van een component met meerdere eigenschappen animeren. Hiertoe selecteren we de componenteigenschap met de puntsyntaxis: componentName.propertyName .
Om bijvoorbeeld de radiusTop een kegel te animeren, kunnen we de radiusTop waarde selecteren met geometry.radiusTop .
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>