Animation in Java applets

By Arthur Van Hoff With Kathy Walrath, JavaWorld.com, 03/01/96

Basic animation techniques

Many forms of animation are possible in Java. What all of them have in common is that they create some kind of motion on the screen by drawing successive frames at a relatively high speed (usually about 10-20 times per second).

We will start by creating a simple template applet for doing animations and slowly elaborate it until we arrive at a fairly complete applet.

Using a thread

To update the screen multiple times per second, you need to create a new Java thread that contains an animation loop. The animation loop is responsible for keeping track of the current frame and for requesting periodic screen updates. To implement a thread, you must either create a subclass of Thread or adhere to the Runnable interface.

A common mistake is to put the animation loop in the paint() method of an applet. Doing so will have strange side effects because it holds up the main AWT thread, which is in charge of all drawing and event handling.

As an example I have written a small template applet, called Example1Applet, that illustrates the general outline of an animation applet. Example1Applet shows how to create a thread and call the repaint() method at fixed intervals. The number of frames per second is specified by passing in an applet parameter. Here is an example of what you would put in your HTML document:

    <applet code=Example1Applet.class width=200 height=200>
    <param name=fps value=20>
    </applet>

Here is Example1Applet.

Note:
This applet doesn't actually draw anything on the screen yet. Drawing to the screen is explained later. Note also that the applet destroys its animation thread whenever the user leaves the page (which results in the applet's stop() method being called). This ensures that the applet won't waste CPU time while its page isn't visible.

Keeping a constant frame rate

In the example above, the applet simply sleeps for a fixed amount of time between frames. This has the drawback that you sometimes wait too long. To get 10 frames per second you should not wait 100 milliseconds between frames, because you lose some time just running the thread.

The following applet, Example2Applet, shows how to keep better time. It simply computes the correct delay between frames by keeping track of the starting time. It computes the estimated required delay between frames based on the current time.

Here is Example2Applet.

Painting each frame

What remains is to paint each frame. In the previous examples, we call repaint() for each frame, which causes the applet's paint() method to be called. The Example3Applet has a paint() method that draws the number of the current frame to the screen.

Here is Example3Applet in action, followed by a code listing.

Note:
If you specify the frame rate to be very high (say 100 frames per second), the run() method will call repaint() 100 times per second. However, this will not always result in 100 calls to paint() per second because when you issue repaint request too quickly they will be collapsed into a single screen update. This is why we keep track of the current frame number in the run() method rather then in the paint() method.

Free Download - 5 Minute Product Review. When slow equals Off: Manage the complexity of Web applications - Symphoniq

Free Download - 5 Minute Product Review. Realize the benefits of real user monitoring in less than an hour. - Symphoniq