We can add animations to our entities using A-Frame’s built-in animation
component.
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 animation
component:
<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:
- Animate the object
position
’s x-axis. - Animate from the original x-position to
3
, which is 1 meter to the right. - Set the
dir
(direction) toalternate
so it goes back and forth. - Set the
dur
(duration) to2000
millisecond on each cycle. - Set the
loop
totrue
to repeat the animation forever.
Check out the animation
documentation for more info.
Instructions
Go back to the code and add some animation for the character, specifically the object3D.position.y
with
to
of2.2
dir
ofalternate
dur
of2000
loop
oftrue
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.