How to configure movement of objects in A-Frame
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.
Want to keep
Lancaster University online course,
Construct a Virtual Reality Experience
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.
<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>
<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>
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>
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.
Construct a Virtual Reality Experience
Our purpose is to transform access to education.
We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.
We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.