Published on <a href="http://ift.tt/2oy9w0P">| Prototyping: From UX to Front End &mdash; Medium</a> Alexandra Etienne 
Welcome to this <a href="https://aframe.io/">A-Frame</a> tutorial! We are going to take a look at the different kinds of animations that we can do with this awesome framework, using an <a href="http://ift.tt/2pgO2nl">example on codepen.io</a>.
Animations are a key part of all great 3d creations out there. They attract our eye and bring our scene to life.
<iframe src="http://ift.tt/2pfHWXg" width="480" height="255" frameborder="0"><a href="http://ift.tt/2pBnDQN">http://ift.tt/2pBnDQN</a></iframe>
We can very easily create <a href="http://ift.tt/2pgHDZC">animations in A-Frame</a> placing the &lt;a-animation&gt; 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:
<h3>Position Animation</h3>
<img alt="" src="http://ift.tt/2pfCP9G">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 <a href="http://ift.tt/2oy0GQI">here</a>. Then we can change variables like:
<ul>
<li>dur (duration in milliseconds of the animation) in this case 3000 — the higher the value the slower it will move.</li>
<li>from (where the animation starts) in this case a value of -5 in the x axis</li>
<li>to (where the animation ends) in this case 5 in the x axis</li>
<li>repeat (how many times do you want your animation to, well, repeat) in this case its “indefinite”, so it will go on forever.</li>
</ul>
The rest of the code is just adding a light-yellow sky and adjusting the position of the camera.
Result:
<img alt="" src="http://ift.tt/2pBzqhP">
<h3>Rotation Animation</h3>
<img alt="" src="http://ift.tt/2pfxHT7">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:
<img alt="" src="http://ift.tt/2pBnBZb">
<h3>Color Animation</h3>
<img alt="" src="http://ift.tt/2pfkNVa">Changing the 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 &lt;a-animation&gt; 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:
<img alt="" src="http://ift.tt/2pBnJHY">
You can take a look at a <a href="https://www.youtube.com/watch?v=JDAdQV4YWRc&amp;list=PLUtkqA7NXVH7ctoJYhsh4xqJn3iWMpP30&amp;index=3">video tutorial</a> I made of basic animations on a-frame, explaining this example step by step:
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FJDAdQV4YWRc%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJDAdQV4YWRc&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FJDAdQV4YWRc%2Fhqdefault.jpg&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2pfrkPw">http://ift.tt/2pfrkPw</a></iframe>
But wait, there’s something missing…
<h3>Scaling Animation</h3>
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.
<img alt="" src="http://ift.tt/2pBlN27">
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 <a href="http://ift.tt/2ph5bNN">easing functions</a> that you can play around with. You can also check out the visualisations of the different curves of easing patterns <a href="http://ift.tt/28URsq8">here</a>. 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 <a href="http://ift.tt/2pgJb5Q">here</a>.
Thanks to this we get that heart-pumping effect.
Result:
<img alt="" src="http://ift.tt/2pfFfoL">
As you can see the object I’m animating here is Earth, which I created by just <a href="https://www.youtube.com/watch?v=klnwT3vGCPw&amp;list=PLUtkqA7NXVH7ctoJYhsh4xqJn3iWMpP30&amp;index=4">adding a texture image</a> to a sphere, and the space behind is simple a <a href="https://www.youtube.com/watch?v=CaRgVJdHRVI&amp;index=6&amp;list=PLUtkqA7NXVH7ctoJYhsh4xqJn3iWMpP30">skybox</a>. 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 <a href="https://twitter.com/AndraConnect">@AndraConnect</a>
<img src="http://ift.tt/2pBEFOw" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2pfGwMC">Learning A-Frame: How to do Animations</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Learning A-Frame: How to do Animations

Top Stories