We can add animations to our entities using A-Frame’s built-in
Animations are essentially programmed changes in an entity’s values. The changes can be based on time intervals or on interactions.
Suppose we have a box in our scene and we want it to hover up and down to add some motion. Check out the
<a-box color="red" position="2 2 -5" rotation="0 45 45" animation="property: object3D.position.x; to: 3; dir: alternate; dur: 2000; loop: true"> </a-box>
Note that there are five
animation properties separated by semicolons. Here, we are telling the animation component to:
3, which is 1 meter to the right.
alternateso it goes back and forth.
2000millisecond on each cycle.
trueto repeat the animation forever.
Check out the
animation documentation for more info.
Go back to the code and add some animation for the character, specifically the
Welcome! text looks a little weird being stationary while the character moves, let’s give it some animation, too.
Add the same animation for the text entity and make it go up and down by 0.2 meters.