So, now I've animated some of the elements in my scene and pulled off some pretty neat stuff! I hope you've started to experiment with some animations on your own project. I want to show you another thing you can do with this component: animate the main camera! The main camera is the perspective of the viewer, so you can animate this to achieve some neat effects like fly-overs.
Tip: One warning - if people are viewing your site in VR and you have a fast animation on the main camera, it might make them queasy and uncomfortable. Their visual perspective will be moving, even if they aren't moving their head or their bodies - that can be a strange feeling in VR.
That said - this is a good technique if you need to animate the camera perspective.
When you make any scene with A-Frame, a camera gets automatically created. This is why you're able to view your site at all! Without a camera, there would be no viewing perspective. As you've probably seen, when you view your site on desktop, you can move the default camera by using the wasd keys and you can rotate it around by clicking and dragging the mouse. This is because the default camera has two handy components already on it: wasd-controls and look-controls!
To animate the camera, though, we need to be able to see the camera in our HTML so that we can modify it. Let's get to it! First, make an empty entity in your scene with the a-entity element. An entity is just an element in your A-Frame scene.
<a-entity></a-entity>
Now, let's give this entity the camera component. This is one of the components that comes with A-Frame that you can find right in the A-Frame documentation.
camera>
Now, we can control our camera in our code! We still want our camera to have wasd-controls and look-controls so that users can move around and look around, so go ahead and add those components as well. These are components that come included with A-Frame, so you don't need to import them in your project.
wasd-controls look-controls>
The camera has a default position of 0, 0, 0. This is called the origin point of the scene. Since I want to make a flyover effect that will cause the camera to swoop in to the scene, I want to start the camera farther away from my shapes. I'll give it position="0 3 20". See now how the initial viewpoint is farther away from our scene?
Now, let's animate the camera so it slowly moves towards the scene. I'm going to be animating its position, and I want it's final destination to be closer to my shapes. I know that with the animation component, I can use the to property set the target destination for the animation. I'll also give it a duration of 10,000 milliseconds and set the final position to be 0 3 0.
animation="property:position; to: 0 3 0; dur: 10000">
By the time you get to this section, the animation on the camera will already have happened. Refresh the page to see it!
Sweet! Now that you've seen some other examples of animations in action, I'd like you to put some final touches on the animations in your own project. Feel free to tinker with the different properties you can set on the animation component by exploring the property list on the documentation page for the component.
Once you have your animations set up how you want, feel free to share your work to the Frame Gallery. This is a friendly, casual place where we can explore each others' work and build community.
The animation component is just one of thousands of components you can bring into your project - and in future projects you'll be writing your own. :)
Did you get value from this Frame Academy project? Do you want support the creation of more?
