How to configure movement of objects in A-Frame

A designer defines what kind of motion will occur. But how do we go about programming it?

Introduction
Let’s explore how we can programmatically add motion to a virtual world in AFrame. The Animation attribute is one of the simplest ways to introduce motion in AFrame. It is very similar to the concept of tweening. While we focus on motion in this article, the animation attribute can be used to control colour, opacity and any other property which has a range of values. It is a powerful tool to add dynamic behaviour to a virtual world. We will use the properties of the animation attribute to animate the objects in our virtual world applications. We encourage you to fully explore the capabilities of the animation attribute yourself.

Animation Properties
To describe motion of a virtual world object, we need to specify the start position, end position and how long does it take to reach the end position. In addition to this, we may need to specify how many times the movement happens, how the movement happens and what controls the motion.

Figure 1: Properties required by animation attribute for motion

Our emphases in this session is on few of the properties shown in Figure 1:

From: This is the initial value at the start of the animation. If this is not specified, the current property value of the entity will be used instead (i.e., the default null value). It is best to always specify a from value when possible for setting the object stability, change of position, motion, scale and movement.

To: The to value is a vital property in animation, movement and motion in virtual world application. This is the target value at the end of the animation. Similar to the from value, the to value also need to be specified if not a default null value will be specified instead.

Duration: This is the time taken for a cycle of animation or multiple animations.

Iterations loop: This is the proper that allows the object to continue in motion from start to end position constantly with no stop until program terminates. This allows the code to be executed repeatedly in the direction specified in the program.

Easing: Easing is another important component in AFrame animation. It is a function that allow us to perform ease in, ease out, ease in and out. Easing smooths the animation to make it look and feel more organic.

StartEvents: startEvents is a comma-separated list of events that are used to listen and trigger a run, stop, restart or play action. Animation will not start automatically or autoplay if this events are specified in the VR application. In most cases, the startEvents will restart the animation.

PauseEvents: pauseEvents is a comma-separated list of events that are used to listen to trigger pause. We used the pauseEvents to pause the events in action. If there are other animation components on the entity animating at the same time with the same property, those animations will be automatically paused to avoid conflict.

Single axis motion
Let’s see how we can program this type of motion using the animation attribute. We will use the start (see Figure 2) and end (see Figure 3) positions of Task 2 and make the cube move from the start position to the end position and back to the start position. We have provided a working example (check the link in the ‘See Also’ section below).

Figure 2: Initial position

If you look at the code, you will notice the following:

• The red block is programmed to move from its initial position [0, 0, 0] to its final position [-4, 0, -4]
• It then returns back to initial position
• The block takes 2 seconds for moving in each direction
• The motion is repeating continuously forever.

All this is achieved by using the code below:

<a-box id="block1" position="0 0 0" color="red"
 animation="property:position; from:0 0 0; to:-4 0 -4; 
 dur:2000; dir:alternate; loop:true; easing:linear;">
</a-box>

Figure 3: Animate the blocks to move from start position to the end position and return

Simple rotation

Rotary motion doesn’t produce overall displacement for the object as a whole, but changes the position of the individual components of the object. Let’s introduce some simple rotation by changing the provided example (“MovingBlocks.html”) to make the blue cube spin constantly.

To do so, the rotation needs to be set along the y-axis. The property to animate here is rotation.y. A single complete rotation can be achieved by selecting the from and to values as angles from 0 to 360. The complete animation attribute is provided in the snippet below:

<a-box id="block3" position="0 0 2" color="blue"
 animation="property:rotation.y;from:0;to:360;
 dur:2000;dir:normal;loop:true;easing:linear;">
</a-box> 

Try to explain how the remaining settings affect the rotation.

Using Mixin Entities

Sometimes, different entities exhibit the same animation. The < a-mixin > tag defines a re-usable attribute like animation for these cases. An animation mixin is defined by specifying the animation attribute using the prefix animation__ followed by an unique identifier. This unique identifier can be scale, pos etc. Every mixin has a unique identifier (id). We can apply the animation defined by a mixin by including a reference to the mixin’s id.
Notice that in the provided example, the green block did not have an animation attribute and instead relied on the greenMov mixin to achieve its motion. The relevant code for this shown below.

<a-mixin id="greenMov" 
 animation__m="property:position; from:2 0 0; to:5 0 -4; dur:2000;
 dir:alternate; loop:true;easing:linear;">
</a-mixin> 

<a-box id="block2" position="2 0 0" color="green" mixin="greenMov"></a-box> 

The mixin id is defined as greenMov. This id is then used as the value to the mixin attribute for the green box object. AFrame will animate the green box object based on the animation defined in the mixin greenMov. This results in an animation of the box moving diagonally from a start position [2, 0, 0] to end position [5, 0, -4] and return back to the initial position continuously.

Multiple Animations
We can specify multiple animations for the same entity by using the same prefix (animation__) and identifier approach. The only constraint is that two concurrently active animations should affect different properties (rotation.x and rotation.y count as same property: rotation), else the outcome is unpredictable.