aframe
Animering
Sök…
Introduktion
Animationer och övergångar i A-Frame definieras med hjälp av elementet <a-animation> som barn. Systemet är ungefär baserat efter Web Animations-specifikationen. A-Frame använder tween.js internt.
Anmärkningar
attribut
Här är en översikt över animationsattribut. Vi kommer att gå närmare nedan.
| Attribut | Beskrivning | Standardvärde |
|---|---|---|
| attribut | Attribut till animera. För att specificera ett komponentattribut använder du componentName.property syntax (t.ex. light.intensity ). | rotation |
| Börja | Händelsens namn att vänta på innan animationen börjar. | '' |
| fördröjning | Fördröja (i millisekunder) eller evenemangsnamn att vänta på innan animationen börjar. | 0 |
| riktning | Riktning för animeringen (mellan from och to ). En av alternate , alternateReverse , normal , reverse . | vanligt |
| dur | Animationens varaktighet i (millisekunder). | 1000 |
| easing | Enklare funktion av animeringen. Det finns mycket att välja mellan. | lätthet |
| slutet | Händelsens namn att vänta på innan du stoppar animeringen. | '' |
| fylla | Bestämmer effekten av animering när den inte spelas aktivt. En av backwards , both , forwards , none . | framåt |
| från | Startvärde. | Nuvarande värde. |
| upprepa | Upprepa antalet eller indefinite . | 0 |
| till | Avslutande värde. Måste anges. | Ingen |
Börja
begin attributet definierar när animeringen ska börja spela.
Detta kan antingen vara ett nummer som representerar millisekunder att vänta eller ett händelsens namn att vänta på. Vi kan till exempel definiera en animering som väntar 2 sekunder innan du skalar en enhet.
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
Eller så kan vi definiera en animering som väntar på att överordnade element kommer att utlösa en händelse med namnet fade innan blekning av en enhet.
<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');
Riktning
direction definierar vilket sätt att animera mellan startvärdet och det slutliga värdet.
När vi definierar en växlande riktning, kommer animationen att gå fram och tillbaka mellan from och to värden som en yo-yo. Växlande riktningar påverkar bara när vi upprepar animeringen.
| Värde | Beskrivning |
|---|---|
| alternativ | Animera från from till to på jämna nummererade cykler. På udda numrerade cykler, animering från to till from |
| alternate-omvänt | På udda cykler levande från from till to . På jämna nummererade cykler, animering från to till from |
| vanligt | Animera från from till to . |
| omvänd | Animera från to till from . |
Underlätta
Den easing attribut definierar övergångsfunktionen av animation, som standard för att ease . Det finns för många underlätta funktioner att lista, men vi kan implicit förklara dem.
Ett möjligt värde är linear . Och de grundläggande ease är ease , ease-in , ease-out och ease-in-out .
Sedan finns det fler grupper av lättnadsfunktioner. Ovanstående grundläggande lättnadsfunktioner prefixerar varje grupp av lättnadsfunktioner. Grupperna för lättande funktioner är cubic , quad , quart , quint , sine , expo , circ , elastic , back och bounce .
Exempelvis skulle den cubic gruppen av lättande funktioner bestå av ease-cubic , ease-in-cubic , ease-out-cubic , ease-in-out-cubic .
Fylla
fill definierar effekten av animering när den inte aktivt spelas. Tänk på fill som de värden animationen anger för enheten före och / eller efter varje animationscykel. Nedan visas de möjliga värdena för fill och deras effekter.
| Värde | Beskrivning |
|---|---|
| bakåt | Innan animeringen startar ställer du in startvärdet till from värdet. |
| både | Kombinera effekterna av både bakåtpåfyllning och framåtpåfyllning. |
| framåt | När animationen är klar förblir det slutliga värdet på to värdet. Standardfyllningen. |
| ingen | Innan animeringen startar ställer du in startvärdet till det initiala värdet. När animationen är klar återställer du värdet till det initiala värdet. |
Upprepa
repeat definierar hur ofta animationen upprepas. Vi kallar varje upprepning av animationen för en cykel. Upprepa kan antingen vara ett nummer som räknas ned på varje animationscykel tills den når 0 vid vilken punkt animationen kommer att sluta, eller så kan vi ställa repeat till indefinite och animationen kommer att loopas kontinuerligt tills animationen tas bort manuellt eller stoppas.
EVENEMANG
Elementet <a-animation> avger ett par händelser.
| Event namn | Beskrivning |
|---|---|
| animationend | Avges när animeringen är klar. Vid upprepningar avges när repetitionsräkningen når 0 . Skickas inte ut för obestämda upprepningar. |
| animationstart | Avges omedelbart när animationen börjar spela. |
Exempel på animationer
Som ett inledande exempel, för att definiera en 5-meters bana på en enhet om Y-axeln som tar 10 sekunder, kan vi kompensera positionen och animera rotationen. Denna animering börjar med den initiala rotationen kring Y-axeln på 0 grader och går runt 360 grader. Det definieras med en varaktighet av 10000 millisekunder, upprätthåller det slutliga värdet på varje cykel av animationen och slingor oändligt.
<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>
Animera olika typer av egenskaper
A-Frame animationssystem kan animera olika typer av egenskaper.
vec3 Egenskaper
A-Frame har standard vec3 komponenter (dvs position , rotation och scale ). Dessa komponenter består av tre faktorer: X, Y och Z. Vi kan överföra tre rymdavgränsade nummer till from och to attribut precis som vi skulle definiera dem på en enhet. I detta fall antar animationssystemet att vi animerar ett vec3 värde.
Om vi till exempel vill animera en enhet som går från en plats till en annan, kan vi animera position .
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
Booleska egenskaper
A-Frame har standardkomponenter som accepterar ett enda booleskt värde. Booleska värden kan också "animeras" genom att vända booleanerna i slutet av varje animationscykel.
Vi kan till exempel definiera en animering som kopplar bort synlighet för en enhet efter 5 sekunder.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
Numeriska egenskaper
Vi kan också animera numeriska attribut. Vi kan till exempel animera intensiteten hos det primitiva ljuset.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
Färgegenskaper
Vi kan animera alla komponentegenskaper som har en färgtyp. Vi kan till exempel animera en ruta från vit till röd.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
Komponentegenskaper
Vi kan animera en viss egenskap hos en komponent med flera fastigheter. För att göra det väljer vi komponentegenskapen med punktsyntax: componentName.propertyName .
För att animera en kons radiusTop kan vi till exempel välja radiusTop värdet med geometry.radiusTop .
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>