Game Development Reference
In-Depth Information
so that it animates from fully transparent to fully opaque. The final effect would be
that as the sky gets darker, then stars would appear.
The boat was animated with three keyframes: the first placed it at some position
slightly above the waves, the second moved it to the right and up, and the third key-
frame moved it significantly higher, and a bit to the left. The trick to making the anim-
ation between these points seem somewhat natural, and more like something would
move on the ocean in real life, is to make the distance the object moves between two
different keyframes different. For example, the horizontal distance the boat moves
between the first and second keyframe is different than the horizontal displacement
used between the second and third keyframes. The vertical displacement between
those keyframes are even more drastic. If the distances were all the same, our eye
would get used to the same familiar pattern of motion, and the animation would soon
appear too repetitive and uninteresting.
Animating the waves was equally easy. Although there were two sets of waves, they
both use the same animation set. The only difference is that the set of waves posi-
tioned behind the other (the back wave) was set to move slower, so that it looked like
it was farther away, and the animations didn't seem to be the same.
All that was animated in these wave elements (remember, a wave element is just a
div
with a repeating background image) was the position of the background image.
The
div
elements themselves were always static and absolutely positioned atop
each other. Since the elements were transparent wherever their background images
were transparent, we were able to apply a background color to the element holding
all three of these elements (both waves and the boat), which we set to be the sky
element, which animated the background color.
Although the final result looks fun and slightly complex, the work required to put this
sort of thing together is really no more complicated or difficult than setting up any
other design using plain CSS, especially because this is nothing more than plain old
CSS.
Note
At the time of this writing, there were a handful of tools aimed at helping deve-
lopers create and manage keyframe animations. While many of these tools were
