8. Adding Animations
This is a series on using WebXR to build immersive content. To access the other blogs in the series, follow this link.
In my blog titled Your First 3D Model, we saw how to include the animation-mixer component into our project. The animation-mixer component allows us to play an animation that is already included with any 3D model.
Aframe also provides us with the option of building custom animations using animation component. We can bring this component using a script inside our head element:
<script src=”https://unpkg.com/aframe-animation-component@^5.1.2/dist/aframe-animation-component.min.js"></script>Unlike animation-mixer, the animation component requires configuration.
Let’s see an example:
<a-box position=”-1 1 -4.5" rotation=”0 45 0" color=”#4CC3D9" depth=”.2" width=”2" animation=”property: position; to: -1 1.5 -4.5 dur: 2000 loop: 3"></a-box>We have used 4 properties in our animation component:
- property: It tells the component that we want to animate the position of our box.
- to: Set where the animation will animate to.
- dur: How long the animation should last.
- loop: How many times the animation should repeat.
Task #1: Play around with other properties and apply animation to the rotation and color of our box.
Next, we’ll see how to animate the camera of our project. The camera depicts the viewer’s perspective. When we create any scene with Aframe, a camera gets automatically created.
The camera has 2 components:
- wasd-controls
- look-controls
These components come included with Aframe, so we don’t need to import them in our project. They help us to move around and look around.
To animate the camera, we need to see it in our HTML. For this, we can use <a-entity> element.
Let’s see how we can give a flyover effect to our camera:
<a-entity position=”0 4 40" camera wasd-controls look-controls animation=”property:position; to: 0 4 0; dur: 10000"></a-entity>To give you a little taste of the possibilities of the animation component, I have included a GIF below:
We can notice 4 type of animations above:
- The flyover effect of the camera.
- The blue and red ball moving towards the camera.
- The 2 rotating rectangles.
- The square with fade-out animation.
To see more examples of Aframe, checkout the amazing work of Lee Stemkoski on Github.
In the next blog, we’ll learn about Hit Testing and DOM Overlay. We’ll also get to know how we can incorporate them into our projects to make it more interactive.
See you in the next one.
YoungSphere crowdsources immersive content for K12 education. Contribute your AR/VR content at www.youngsphere.com to earn monetary credits.
