Playing with motion
Let’s work on some examples relevant to programmed motion
Playing with simple motion
In the previous article, we introduced the animation attribute and the mixin tag and showed you how these can be used to program simple motion in a virtual world. This exercise should help you check if you understood the concepts well enough by completing the tasks below.
Background
To start, use the provided resource [here]. The table below shows the initial and end positions of the three blocks which create a view similar to Figure 1:
| Block | Initial | End |
|---|---|---|
| Red | [0, 0, 0] | [-4, 0, -4] |
| Green | [2, 0, 0] | [ 5, 0, -4] |
| Blue | [0, 0, 2] | [ 0, 0, 2] |
Figure. 1: Initial positions of the block objects and end positions (faded blocks)
Task 1: Explore how the ‘loop’ property works. Add animations to the three blocks such that:
-
The red block moves to the end position in 3 seconds and stays there [Use the animation attribute]
-
The green block moves to the end position twice as fast as red block and stays there [Use animation defined via mixin]
-
The blue block rotates at the initial position, completing 3 rotations (1 second per rotation) before stopping. [This block doesn’t move to end position]
Task 2: Explore how the direction property works. Add animations to the three blocks such that:
-
The red block moves from end position to initial position. On reaching initial position, it stays there. [The “from” value should match the initial position and the “to” should match final position]
-
The green block moves to end position. On reaching end position, its location resets to initial position and it then resumes motion towards end position. This is repeated 3 times.
-
The blue block rotates in place constantly. On completing one rotation, the direction of rotation reverses. After 3 rotations, it stops.
Task 3: Explore how the easing property works. Modify the final results of task 3 as follows:
-
Red block moves slowly at start but moves really fast after
-
Green block moves fast at start, but slows down as it gets closer to end position
-
Blue block rotates, but slows down momentarily before changing direction
Complete these tasks on your own and compare your code and results with the provided solution resources.
Reach your personal and professional goals
Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.
Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.
