Java Reference
In-Depth Information
time: 5s
values: dot.translateX => 440 tween Interpolator.EASEBOTH;
}
}
anim.play();
Stage {
title: "Chapter 5 - Simple Example"
width: 640
height: 480
scene: Scene {
fill: Color.WHITE
content: [dot]
}
}
}
In this example, a
Circle
named
dot
is added to the scene. The
dot
starts at the location (140,240)
and an animation moves the dot to the location (440,240), over 5 seconds. This very simple animation is
made slightly more interesting by using an interpolator. The
KeyFrame
above describes that the dot's
translateX
value will be at 440 at the end of 5 seconds. But it also describes where the dot will be
between the beginning of the animation and the 5-second mark. This is described by the keyword
tween
followed by an
Interpolator
, in this case, the built-in interpolator called
EASEBOTH
.
If the animation had a
KeyFrame
at time 10s, that
KeyFrame
would describe the animation between 5s
and 10s. Each
KeyFrame's
interpolator describes the period of time from the
KeyFrame
preceding it to the
specified time. In our example, there is only one
KeyFrame
defined. When an animation does not specify
a
KeyFrame
for time 0s, the developer should assume an implicit
KeyFrame
exits at time 0s.
Visualizing Interpolators
The example code included with this chapter contains a class that can be used to visualize an
interpolator. This class is shown in Listing 5-2.
Listing 5-2.
InterpolatorViewer
public class InterpolatorViewer extends Group{
public var interpolator:Interpolator = Interpolator.LINEAR on replace{
draw();
}
public var currentFraction:Number = 0.0 on replace{
currentValue = interpolator.interpolate(0.0, 1.0, currentFraction) as Number;
};
var currentValue:Number = 0.0;
var animation = Timeline{
repeatCount: Timeline.INDEFINITE;
autoReverse: true;