HTML and CSS Reference
In-Depth Information
Colors
Try easing on 24-bit colors. You'll need to start with red, green, and blue initial values and target values,
perform the easing on each separate component color, and then combine them into a color value. For
instance, you could ease from red to blue. Start with the initial and target colors:
var red = 255,
green = 0,
blue = 0,
redTarget = 0,
greenTarget = 0,
blueTarget = 255;
Then in your
drawFrame
function, perform easing on each one:
red += (redTarget - red) * easing;
green += (greenTarget - green) * easing;
blue += (blueTarget - blue) * easing;
Then combine the three components into a single value (as described in Chapter 4), and apply:
var color = red << 16 | green << 8 | blue;
Transparency
Apply easing to the
alpha
component of a CSS-style color string. Start out by setting it to 0, and making
the target 1 (remember that
alpha
is a value from 0.0 to 1.0):
var alpha = 0,
targetAlpha = 1;
Then in the
drawFrame
function, fade it in with easing, and concatenate a RGBA string:
alpha += (targetAlpha - alpha) * easing;
ball.color = "rgba(255, 0, 0," + alpha + ")";
Or reverse the 0 and 1 to make it fade out.
Advanced easing
Now that you've seen how simple easing works, you might consider using more complex easing formulas
for additional effects. For instance, you might want something to start slowly, build up speed, and then
slow down as it approaches its target. Or you might want to ease something into position over a certain
time period or number of frames.
Robert Penner has collected numerous easing formulas, cataloged them, and implemented them in Flash.
You can find his easing formulas at
http://robertpenner.com
,
and I've ported that code to JavaScript
for you to look at, and perhaps include in your own animations. You can browse this code, along with the
other book examples, at
http://github.com/lamberta/html5-animation
