Example
A-Frame's animation system can animate different types of properties.
vec3 Properties
A-Frame has standard vec3 components (i.e., position, rotation,
and scale). These components consist of three factors: X, Y, and Z. We can
pass three space-delimited numbers to the from and to attributes just as we
would define them on an entity. In this case, the animation system will assume
we are animating a vec3 value.
For example, if we want to animate an entity going from one spot to another, we
can animate the position component.
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
Boolean Properties
A-Frame has standard components that accept a single boolean value. Boolean values can be "animated" as well by flipping the boolean at the end of each animation cycle.
For example, we can define an animation that toggles off the visibility of an entity after 5 seconds.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
Numeric Properties
We can animate numeric attributes as well. For example, we can animate the intensity of the light primitive.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
Color Properties
We can animate any component property that has a color type. For example, we can animate a box from white to red.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
Component Properties
We can animate a certain property of a multi-property component. To do so, we
select the component property using the dot syntax:
componentName.propertyName.
For example, to animate a cone's top radius, we can select the radiusTop
value with geometry.radiusTop.
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>
