Important Attributes of the Animation

Important Attributes of the Animation

Topic Progress:

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-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.




Comments are closed.