How to Animate a Ball Bounce
This is accurate to real-world physics and will teach you a ton!
1. Watch how to tween:
2. Open Wick and crank the Framerate
24 Frames Per Second (FPS) means the anim will play 2x faster (and 2x smoother) than 12 FPS.
Then click outside the box to close it.
3. Draw the ball
Using the ellipse tool, hold shift to draw a circle. I went with a basketball.
4. Make it a Clip
Using the Cursor tool, drag-select it all and click Make Clip (Clips are similar to Movieclips in Flash). Click Edit Timeline to edit the ball’s internal timeline.
5. Clip it again!
Redo step 3 (Drag-select the whole ball again, click Make Clip, then Edit Timeline).
You just made a clip inside a clip… inside a project, meaning you stacked 3 timelines on top of each other. I’ll explain why later.
6. Make a tween
Select the first frame, Add Tween, extend the frame a bunch (shift >):
Finish your tween with a 2nd tween keyframe.
Press 9 to hide these blue boxes:
7. Rotate the ball
The ball’s gotta rotate while it’s bouncing.
If you’ll be making your ball bounce towards the right, click the ball on the first frame and change its rotation to -179°. Click the final frame, then click the ball and change its rotation to 179°.
Press play, it rotates 358° clockwise!
However if you’ll make your ball bounce to the left, rotate it counter-clockwise (from 179° to -179°).
Explanation for nerds: Currently Wick can’t tween an object past 180°, so if you were to set an object to 181°, Wick converts 181° to -179°. Therefore it tweens the shortest path from -179° to 179° which is 358°, basically a full rotation using one tween.
8. Apply gravity
Exit that Clip by clicking Clip 1, shown below:
Make a tween of the ball moving straight down (use shift + down for precision). To accelerate it towards the ground, click the first frame and change the easing to in.
This is loosely the speed it should fall (depending on how far it falls):
Decide how bouncy it should be. A real basketball bounces to 60% of its previous height each time.
Bouncing uses 2 tweens, ease out on the way up and ease-in on the way down.
10. Finish all the bounces
Remember, each bounce is 60% as high and takes 80% the time of the previous bounce (unless your ball is less bouncy).
11. Horizontal movement
When you throw a ball sideways, it doesn’t lose any horizontal speed (it will roll forever if you ignore drag and friction).
In the project timeline tween the ball right or left, no easing.
The lines show that the clip is moving only horizontally.
You can also change the direction in the middle of that tween to make it bounce off stuff. This is made with only horizontal tweens:
How could you expand on this?
- Make the rotation in Step 7 loop perfectly. It currently doesn’t because it starts and stops on the same frame, meaning there’s two frames in a row of the same position. You could fix the loop by starting at -180° and ending at (180°-360°/(# frames in rotation))
- Think of how to make it bounce off a slope
- If you took grade 10 physics, and if you know the size of your ball and the distance it falls, you can adjust the time of the first tween based on how much time it would take an actual ball to fall using the gravitational constant.