aframe
Animación
Buscar..
Introducción
Las animaciones y transiciones en A-Frame se definen utilizando el elemento <a-animation> como elemento secundario. El sistema se basa aproximadamente en la especificación de animaciones web. A-Frame utiliza tween.js internamente.
Observaciones
Atributos
Aquí hay una visión general de los atributos de animación. Vamos a entrar en más detalle a continuación.
| Atributo | Descripción | Valor por defecto |
|---|---|---|
| atributo | Atributo para animar. Para especificar un atributo de componente, use la sintaxis componentName.property (por ejemplo, light.intensity ). | rotación |
| empezar | Nombre del evento a esperar antes de comenzar la animación. | '' |
| retrasar | Retardo (en milisegundos) o nombre del evento para esperar antes de comenzar la animación. | 0 |
| dirección | Dirección de la animación (entre from y to ). Uno de alternate , alternateReverse , reverse , normal , reverse . | normal |
| dur | Duración en (milisegundos) de la animación. | 1000 |
| facilitando | Función facilitadora de la animación. Hay muchos para elegir. | facilitar |
| fin | Nombre del evento a esperar antes de detener la animación. | '' |
| llenar | Determina el efecto de la animación cuando no está activo en el juego. Uno de backwards , both , forwards , none . | hacia adelante |
| desde | Valor inicial. | Valor actual. |
| repetir | Repita el conteo o indefinite . | 0 |
| a | Valor final. Debe ser especificado. | Ninguna |
Empezar
El atributo de begin define cuando la animación debe comenzar a reproducirse.
Puede ser un número , que representa milisegundos que esperar o un nombre de evento que esperar. Por ejemplo, podemos definir una animación que espere 2 segundos antes de escalar una entidad.
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
O podemos definir una animación que espere a que el elemento padre active un evento llamado fade antes de desvanecer una entidad.
<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');
Dirección
El atributo de direction define la forma de animar entre el valor inicial y el valor final.
Cuando definimos una dirección alterna, la animación irá de un lado a otro entre los valores from y to como un yo-yo. Las direcciones alternas solo tienen efecto cuando repetimos la animación.
| Valor | Descripción |
|---|---|
| alterno | En los ciclos de números pares, anime from a to . En los ciclos impares, la animación de to a from |
| alterno-reverso | En los ciclos con números impares, anime from a to . En ciclos de números pares, animación de to a from |
| normal | Animar a partir from a to . |
| marcha atrás | Animar de to a from . |
Facilitando
El atributo de easing define la función de suavizado de la animación, que por defecto ease . Hay demasiadas funciones de aceleración para enumerar, pero podemos explicarlas implícitamente.
Un valor posible es linear . Y las funciones básicas de aceleración son ease , ease-in , ease-out y ease-in-out .
Luego hay más grupos de funciones de flexibilización. Las funciones de suavizado básicas anteriores prefijan cada grupo de funciones de suavizado. Los grupos de funciones de aceleración son cubic , quad , quart , quint , sine , expo , circ , elastic , back y bounce .
Por ejemplo, el grupo cubic de funciones de aceleración consistiría ease-cubic ease-in-cubic , ease-cubic ease-in-cubic , ease-in-cubic , ease-out-cubic ease-in-out-cubic .
Llenar
El atributo de fill define el efecto de la animación cuando no está activo en el juego. Piense en el fill como qué valores establece la animación en la entidad antes y / o después de cada ciclo de animación. A continuación se muestran los posibles valores de fill y sus efectos.
| Valor | Descripción |
|---|---|
| hacia atrás | Antes comienza la animación, establezca el valor de salida a la from valor. |
| ambos | Combina los efectos de relleno hacia atrás y relleno hacia adelante. |
| hacia adelante | Una vez finalizada la animación, el valor final se quedará en el to valorar. El relleno por defecto. |
| ninguna | Antes de que comience la animación, establezca el valor inicial en el valor inicial. Una vez finalizada la animación, restablecer el valor al valor inicial. |
Repetir
El atributo de repeat define con qué frecuencia se repite la animación. Llamamos a cada repetición de la animación un ciclo. Repetir puede ser un número que realiza una cuenta regresiva en cada ciclo de animación hasta que llegue a 0 punto en el que finalizará la animación, o podemos configurar la repeat a indefinite y la animación se repetirá continuamente hasta que la animación se elimine o se detenga manualmente.
EVENTOS
El elemento <a-animation> emite un par de eventos.
| Nombre del evento | Descripción |
|---|---|
| animación | Se emite cuando finaliza la animación. En caso de repeticiones, se emite cuando el recuento de repeticiones llega a 0 . No emitido por repeticiones indefinidas. |
| animaciónstart | Se emite inmediatamente cuando la animación comienza a reproducirse. |
Animaciones de ejemplo
Como ejemplo introductorio, para definir una órbita de 5 metros en una entidad sobre el eje Y que toma 10 segundos, podemos compensar la posición y animar la rotación. Esta animación comienza con la rotación inicial sobre el eje Y de 0 grados y gira alrededor de 360 grados. Se define con una duración de 10000 milisegundos, mantiene el valor final en cada ciclo de la animación y se repite infinitamente.
<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>
Animando diferentes tipos de propiedades
El sistema de animación de A-Frame puede animar diferentes tipos de propiedades.
Propiedades de vec3
A-Frame tiene componentes vec3 estándar (es decir, position , rotation y scale ). Estos componentes constan de tres factores: X, Y y Z. Podemos pasar tres números delimitados por espacios a los atributos from y to tal como los definiríamos en una entidad. En este caso, el sistema de animación asumirá que estamos animando un valor vec3 .
Por ejemplo, si queremos animar una entidad que va de un lugar a otro, podemos animar el componente de position .
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
Propiedades booleanas
A-Frame tiene componentes estándar que aceptan un solo valor booleano. Los valores booleanos también pueden ser "animados" al voltear el booleano al final de cada ciclo de animación.
Por ejemplo, podemos definir una animación que desactiva la visibilidad de una entidad después de 5 segundos.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
Propiedades numéricas
También podemos animar atributos numéricos. Por ejemplo, podemos animar la intensidad de la luz primitiva.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
Propiedades de color
Podemos animar cualquier propiedad componente que tenga un tipo de color. Por ejemplo, podemos animar un cuadro de blanco a rojo.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
Propiedades de los componentes
Podemos animar una determinada propiedad de un componente multi-propiedad. Para hacerlo, seleccionamos la propiedad del componente usando la sintaxis del punto: componentName.propertyName .
Por ejemplo, para animar el radio superior de un cono, podemos seleccionar el valor de radiusTop con geometry.radiusTop .
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>