Attributes of the Animation
An animation has the following attributes. What do they mean?
<a-entity id="camera" position ="0 1 5"> <a-camera zoom="0.5" user-height="0"> <a-cursor></a-cursor> </a-camera> <a-animation id="ani3" easing="linear" begin="cmd_Start3" dur="5000" attribute="position" from="0 1 -5" to="-5 1 0"></a-animation>
- easing=linear means that the animation has a constant speed. It does not start or end slow. easing=ease-out causes the animation to start more quickly than linear ones. easing=ease-in start slowly and end fast, which is the opposite of ease-out animations. easing=ease-in-out is a combination of both. See all the details on the internet.
- begin is either a starting value in milliseconds (eg. 10000) or the parent element <a-camera> receives a start command from an event. In the example an event sends (or emits) the message cmd_start3.
- dur is a value in milliseconds (eg. 5000) and defines the length of the animation.
- attribute defines the attribute to animate (for example position, rotation, color etc.)
- to is the start and end the end value of the chosen attribute.
- repeat defines the number of repetitions of the animation (a number or indefinite)
- delay waits before beginning the animation (in milliseconds or event name)
Explanation in plain English
When the parent element of the animation (in our case the <a-entity id=”camera”>) receives the command cmd_start3, the animation begins. During a duration of 5000 milliseconds (5 seconds) it will in a constant way move the camera from the position (0 1 -5) to (-5 0 1).
Important to remember
An animation always belongs to a parent element.
Events belonging to the Animation
The <a-animation> triggers the two events animationstart and animationend.