Add spice to your splash screen with animation

Create a dynamic splash screen in Java

By Michael Bangham, JavaWorld.com, 10/03/05

Print
Email
Feedback
Resources
Discuss

Digg
Reddit
SlashDot
Stumble
del.icio.us
Technorati
dzone

While developing a new feature for a product, I decided to create a splash screen that illustrated the metaphor of pieces falling into place. A little animation seemed the perfect trick for the job. To spice up your own splash screen, you can use the code presented in this article. Check Resources for the complete source.

Figure 1 illustrates the idea for the animation, using my company's slogan as the example. To create the desired effect, we want to chop up the slogan into its individual characters. These characters will fly in from all sides of the splash screen, ultimately falling into place to create the slogan. To keep the view realistic, the characters' trajectories should replicate something like a cannonball shot from a cannon. So the code needs to incorporate some basic physics—don't worry, the math is really simple.

Figure 1. Each character flies in from three sides

Figure 2 shows the final result after the animation completes. We'll also use a gradient paint for the background to add a little texture.

Figure 2. Animated splash screen

Calculate the trajectory

First things first—we need to decide how the characters, or sprites, will move about the screen. Animators use the term sprite to describe a small moving bitmap. We're going to randomly assign a starting position for each sprite along the top three sides of the view—left, top, right—in traditional x, y coordinates (i.e, not screen coordinates). We assign a final position based on the location of the sprite in the slogan text. The essence of our problem is this: we need to calculate an initial velocity for both the x and y directions for each sprite such that each sprite lands in the proper position after the allotted simulation time. Since we want a realistic trajectory, we'll want to include a "gravity field" in the y direction that pulls each sprite towards its final destination. Then we can launch our "cannonball" sprites toward their final targets.

The first equation we need comes from basic physics:

Equation 1 says that our sprite's final position is equal to velocity multiplied by time, plus the initial position. Since there isn't a gravity field along the horizontal axis, the velocity for each sprite along the x direction will be constant. Each sprite will start at a different x position, so the distance each sprite needs to cover will differ. Therefore, each sprite's velocity—though constant—will differ from the velocity of the other sprites.

The y direction is trickier since we want to include a gravity field, which will pull the cannonball (sprite) back towards ground (the final sprite position). In this case, velocity isn't going to be constant, so we need another equation from Physics 101:

Equation 2 says that our sprite's velocity equals acceleration multiplied by time, plus the sprite's initial velocity. Like gravity, our acceleration will be constant. So, we can plug Equation 2 into Equation 1 for the y direction and get:

Write the application

Now that we've figured out the basic physics, we're ready to start writing some code. We start by creating a new class, AnimationBanner, to serve as the entry point. Let's use a few static fields to capture the fundamental parameters for the simulation: