Planning for Frameby Frame Animation

Before you start writing code, you first need to plan the animation sequence using a series of drawings. As an example of this planning exercise, Figure 6-1 shows a set of same-sized circles with a colored ball on each of the circles placed at a different position. You can take a series of these pictures showing the circle at the same size and position but the colored ball at different points along the circle's border. Once you save seven or eight of these frames, you can use animation to show that the colored ball is moving around the circle.

Figure 6-1. Designing your animation before coding it

Give the image a base name of colored-ball. Then you can store eight of these images in the /res/drawable subdirectory so that you can access them using their resource IDs. The name of each image will have the pattern colored-ball-N, where N is the digit representing the image number. When you are finished with the animation, you want it to look like Figure 6-2.

Figure 6-1. Designing your animation before coding it

Figure 6-2. Frame-by-frame animation test harness

The primary area in this activity is used by the animation view. We have included a button to start and stop the animation to observe its behavior. We have also included a debug scratch pad at the top, so you can write any significant events to it as you experiment with this program.

0 0

Post a comment