Task Summary |
Key Terminology |
What you will learn
You will learn how to animate shapes and how to create an animation that happens based on user events How you will be assessed You will submit a 2D animation file |
Frame - a single 'point' in an animation
Variable - a storage location in a computer which has a name attached to it so it can be accessed |
Basic Animation
Now you know how to create 2D graphics, we can now learn how to animate these on the screen.
Computer animation works very similar to a flipbook animation where you have to redraw everything each time it changes.
Computer animation works very similar to a flipbook animation where you have to redraw everything each time it changes.
Looping animation
The code opposite should look quite familiar. We have a HTML canvas to draw on (500 x 300 in size) and we have some Javascript with one function called "animation()".
Watch the video for an explanation of how it works. Activities 1. Create your own basic animation
2. Can you change the code so the square moves from left to right rather than right to left? 3. Can you change the code so the square moves from the top to the bottom rather than left to right? |
Animating based on events
Sometimes we do not want the graphics to animate automatically - we want them to happen based on events from the user - like pressing a key or clicking the mouse.
To do this, we need to use event listeners that react when a specified event happens. The code opposite shows the Javascript for the code above with the added element that when you click the mouse, the square moves up the screen - like a jump. Activities 1. Can you reverse the gravity and make the square rise rather than fall? When the user clicks, the square should move down, not up.
Going for Gold |
Assessment Task 2
1. At the moment, the square drops off the bottom of the screen. Change the code so the square goes to the bottom, but not below it.
2. If the user keeps clicking the mouse, the square goes off the top of the screen. Change the code to stop this happening.
3. Explain how you achieved question 1 and 2 - how does the code solve these problems? You can use screenshots to help explain your answer.
2. If the user keeps clicking the mouse, the square goes off the top of the screen. Change the code to stop this happening.
3. Explain how you achieved question 1 and 2 - how does the code solve these problems? You can use screenshots to help explain your answer.