Learning A-Frame: How to do Animations
Welcome to this A-Frame tutorial! We are going to take a look at the different kinds of animations that we can do with this awesome framework, using an example on codepen.io.
Animations are a key part of all great 3d creations out there. They attract our eye and bring our scene to life.
We can very easily create animations in A-Frame placing the <a-animation> element inside the object/entity we want to animate. We can then decide which properties we want to animate. With this in mind, we can make our entity move the way we want, modifying attributes like its position, rotation, scale and even the color.
Let’s take a look at each one:
Position Animation
So we have a scene, with a box entity. Attaching the animation as a child of our box, we label the attribute “position” — To learn more about all the attributes that you can use with animations see here. Then we can change variables like:
- dur (duration in milliseconds of the animation) in this case 3000 — the higher the value the slower it will move.
- from (where the animation starts) in this case a value of -5 in the x axis
- to (where the animation ends) in this case 5 in the x axis
- repeat (how many times do you want your animation to, well, repeat) in this case its “indefinite”, so it will go on forever.
The rest of the code is just adding a light-yellow sky and adjusting the position of the camera.
Result:
Rotation Animation
So in this example, same thing, the animation is a child of the box entity. However, the attribute is labeled as “rotation”. The dur has the same value and the repeat is left as “indefinite”. No need to define a from attribute, since we want our box to rotate at 360° in the y axis, we just define the to attribute to that value.
We introduce the easing attribute, which is basically how you want the object to move/or what pattern do you want your animation to follow (we’ll see more on that later). In this case the easing is “linear”, which makes the animation constant in its movement.
Result:
Color Animation
In this step, we are going to combine the two previous animations, and add some lines of code (see screenshot above) to change the color of our entity in sync with the other animations.
So we open another <a-animation> and modify its parameters, defining the attribute “material.color” and going from a blue to a red color. The dur and repeat keep the same values as before.
We will be able to see the transition of the color while our box is moving. So all 3 animations (position, rotation and color) are working together.
Result:
You can take a look at a video tutorial I made of basic animations on a-frame, explaining this example step by step:
But wait, there’s something missing…
Scaling Animation
The “scale” animation is probably my favorite. We can make our entities bigger and smaller, and even create funky animations. In this next example, we are going to make our object pulsate or pump like a heart. This is a little bit more advanced than basic animations but I wanted to share the cool effect with you guys.
So, as shown on the screenshot above, the attribute is “scale”, the dur is 1000 (so it will move faster than our the box from before). We will start from a value of 1 in the x,y,z axis and go to a value of 2. The repeat attribute is kept as “indefinite”.
Additionally, we are going to change the easing to “ease-in-out-circ” — this is one of the many easing functions that you can play around with. You can also check out the visualisations of the different curves of easing patterns here. The “ease-in-out-circ basically means that the animation will start slow, speed up in the middle, and then slow down at the end in a sort of circular/elliptic way.
We’ve also included the direction attribute, that defines which way to animate between the from and to values. In this case, alternate-reverse means animating “on odd-numbered cycles, from from to to and on even-numbered cycles, from to to from” If you want to know more about the different values you can use for the direction attribute please go here.
Thanks to this we get that heart-pumping effect.
Result:
As you can see the object I’m animating here is Earth, which I created by just adding a texture image to a sphere, and the space behind is simple a skybox. It is very simple to do, check out the links ;) You can make your own Earth with just a few lines of code and animate it anyway you want!
Thanks for reading guys. I hope you find this post useful. I suggest you get crazy trying out animations on a-frame!
Don’t hesitate to contact me anytime @AndraConnect
