aframe
Animazione
Ricerca…
introduzione
Le animazioni e le transizioni in A-Frame vengono definite utilizzando l'elemento <a-animation> come child. Il sistema è basato approssimativamente sulla specifica Web Animations. A-Frame utilizza tween.js internamente.
Osservazioni
attributi
Ecco una panoramica degli attributi dell'animazione. Andremo più in dettaglio qui sotto.
| Attributo | Descrizione | Valore predefinito |
|---|---|---|
| attributo | Attributo da animare. Per specificare un attributo componente, utilizzare la sintassi componentName.property (ad esempio, light.intensity ). | rotazione |
| inizio | Nome dell'evento da attendere prima di iniziare l'animazione. | '' |
| ritardo | Ritardo (in millisecondi) o nome dell'evento da attendere prima di iniziare l'animazione. | 0 |
| direzione | Direzione dell'animazione (tra from e to ). Uno di alternate , alternateReverse reverse , normal , reverse . | normale |
| dur | Durata in (millisecondi) dell'animazione. | 1000 |
| facilitando | Funzione di alleggerimento dell'animazione. Ce ne sono molti tra cui scegliere. | alleviare |
| fine | Nome dell'evento da attendere prima di interrompere l'animazione. | '' |
| riempire | Determina l'effetto dell'animazione quando non è attivo nel gioco. Uno a backwards , both , forwards , none . | in avanti |
| a partire dal | Valore iniziale | Valore corrente. |
| ripetere | Ripeti il conteggio o indefinite . | 0 |
| a | Valore finale Deve essere specificato | Nessuna |
Inizio
L'attributo begin definisce quando deve iniziare l'animazione.
Questo può essere un numero , che rappresenta millisecondi, o un nome di evento da attendere. Ad esempio, possiamo definire un'animazione che aspetta 2 secondi prima di ridimensionare un'entità.
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
Oppure possiamo definire un'animazione che aspetta che l'elemento genitore inneschi un evento chiamato fade prima di dissolvere un'entità.
<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');
Direzione
L'attributo direction definisce il modo in cui animare tra il valore iniziale e il valore finale.
Quando definiamo una direzione alternata, l'animazione andrà avanti e indietro tra i valori from e to come yo-yo. Le direzioni alternate hanno effetto solo quando ripetiamo l'animazione.
| Valore | Descrizione |
|---|---|
| alternato | Nei cicli pari, animato da from a to . Su cicli dispari, animazione da to a from |
| alternate-reverse | Nei cicli dispari, animare da from a to . Su cicli pari, animazione da to a from |
| normale | Animate da from a to . |
| inverso | Anima da to a from . |
Facilitare
L' easing attributo definisce la funzione di andamento dell'animazione che imposta ease . Ci sono troppe funzioni di andamento da elencare, ma possiamo implicitamente spiegarle.
Un possibile valore è linear . E le funzioni base di easing sono ease , ease-in , ease-out e ease-in-out .
Quindi ci sono più gruppi di funzioni di andamento. Le funzioni di base di allentamento precedono ogni gruppo di funzioni di andamento. I gruppi di funzioni di easing sono cubic , quad , quart , quint , sine , expo , circ , elastic , back e bounce .
Ad esempio, il gruppo cubic di funzioni di alleggerimento consisterebbe in una ease-cubic , ease-in-cubic , ease-out-cubic , ease-in-out-cubic .
Riempire
L'attributo fill definisce l'effetto dell'animazione quando non è attivo in gioco. Pensa a fill come ciò che valuta i set di animazione sull'entità prima e / o dopo ogni ciclo di animazione. Di seguito sono riportati i valori possibili per il fill e i relativi effetti.
| Valore | Descrizione |
|---|---|
| indietro | Prima che l'animazione inizi, imposta il valore iniziale sul valore from . |
| tutti e due | Combina gli effetti sia del fill backward che del fill forward. |
| in avanti | Al termine dell'animazione, il valore finale rimarrà al to valore. Il riempimento predefinito. |
| nessuna | Prima che l'animazione abbia inizio, imposta il valore iniziale sul valore iniziale. Al termine dell'animazione, reimposta il valore sul valore iniziale. |
Ripetere
L'attributo repeat definisce la frequenza di ripetizione dell'animazione. Chiamiamo ogni ripetizione dell'animazione a ciclo. La ripetizione può essere un numero che esegue il conto alla rovescia su ciascun ciclo di animazione finché non raggiunge 0 a quel punto l'animazione termina, oppure è possibile impostare la repeat a indefinite e l'animazione si interrompe continuamente finché l'animazione non viene rimossa o interrotta manualmente.
EVENTI
L'elemento <a-animation> emette un paio di eventi.
| Nome dell'evento | Descrizione |
|---|---|
| animationend | Emesso quando termina l'animazione. In caso di ripetizioni, emesse quando il conteggio delle ripetizioni raggiunge 0 . Non emesso per ripetizioni indefinite. |
| animationstart | Emesso immediatamente quando inizia l'animazione. |
Animazioni di esempio
Come esempio introduttivo, per definire un'orbita di 5 metri su un'entità attorno all'asse Y che impiega 10 secondi, possiamo spostare la posizione e animare la rotazione. Questa animazione inizia con la rotazione iniziale attorno all'asse Y di 0 gradi e gira intorno a 360 gradi. È definito con una durata di 10000 millisecondi, mantiene il valore finale su ogni ciclo dell'animazione e si estende all'infinito.
<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>
Animare diversi tipi di proprietà
Il sistema di animazione di A-Frame può animare diversi tipi di proprietà.
Proprietà vec3
A-Frame ha componenti standard vec3 (cioè position , rotation e scale ). Questi componenti sono costituiti da tre fattori: X, Y e Z. Possiamo passare tre numeri delimitati da spazi to attributi from e to così come li definiremmo su un'entità. In questo caso, il sistema di animazione supporrà che stiamo animando un valore vec3 .
Ad esempio, se vogliamo animare un'entità che va da un punto all'altro, possiamo animare il componente di position .
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
Proprietà booleane
A-Frame ha componenti standard che accettano un singolo valore booleano. I valori booleani possono anche essere "animati" ribaltando il valore booleano alla fine di ogni ciclo di animazione.
Ad esempio, possiamo definire un'animazione che alterna la visibilità di un'entità dopo 5 secondi.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
Proprietà numeriche
Possiamo anche animare gli attributi numerici. Ad esempio, possiamo animare l'intensità della luce primitiva.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
Proprietà del colore
Possiamo animare qualsiasi proprietà del componente che ha un tipo di colore. Ad esempio, possiamo animare una casella dal bianco al rosso.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
Proprietà del componente
Possiamo animare una certa proprietà di un componente multi-proprietà. Per fare ciò, selezioniamo la proprietà del componente usando la sintassi del punto: componentName.propertyName .
Ad esempio, per animare il raggio superiore del cono, possiamo selezionare il valore radiusTop con geometry.radiusTop .
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>