Effect - Advanced Interpolators

The EaseBoth interpolator Spline A spline Interpolator can be used to create a number of different animations, by specifying different parameters.. TrivialInterpolator.fx public class

87

Effect: Advanced Interpolators

Animations are pictures that change over time; these changes are composed of transformations and

color changes In either case, the rates at which these changes take place dictate much about the

appearance of the animation, and of course, the rates themselves can change over time Imagine the

trivial animation of a rectangle moving from the top of the screen to the bottom If the box moves down

at a constant rate of 2 pixels per second, it would appear to be gently lowering However, if the box drops

2 pixels the first second, 4 pixels the next second, then 8, 16, and so on, the box would seem to be freely falling The difference between an object being lowered and an object falling can have a big effect on the impact of the animation

In the case of keyframe animation, a start position and an end position are defined In terms of the falling rectangle, the starting position is the top of the screen and the ending position is the bottom of

the screen In order to describe how the box moves from the start position to the end position, you must specify a function that describes that motion In the case of the lowering box, the function is simply

linear, while the falling box is defined by a polynomial function These functions describe the

interpolation between the start and end values This chapter explores how interpolators are defined and used in JavaFX by providing several examples of custom interpolators

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 fraction:Number = i/samples;

var value = (interpolator.interpolate(0.0, 1.0, fraction) as Number);

var playhead = Line{

startX: bind currentFraction * width;

insert playhead into content;

var topLine = Line{

Listing 5-2 shows the class InterpolatorView, which extends Group Setting the property

interpolator, which populates the content by calling the function draw, controls the visual appearance

of this Node

The function draw creates a graph that displays an Interpolator as a function of time The function draw also creates several animated components The first is a red line that moves across the graph to

show which value of the Interpolator is being expressed by the other components

The other two components are a green dot that moves vertically with the value currentValue and a rotating square, which is also synchronized with the currentValue

Built-In Interpolators

The interpolators that come with JavaFX are just enough to whet the appetite All of the built-in

interpolators can be accessed by static calls to the class Interpolator, as shown in the first example A

description of each interpolator follows and is demonstrated in the companion code

Linear

The linear interpolator is the default interpolator used by KeyFrame It is not much of an Interpolator, as

it simply returns the value passed to it A node being animated with a linear interpolator starts moving and travels at a constant speed until it suddenly stops at its destination For the sake of completeness,

Figure 5-1 shows a graph describing the motion over time

92

Figure 5-1 Linear interpolation

Ease Out, Ease In, Ease Both

The Ease family of interpolators is used to create more natural animations than simply linear

animations In real life, objects don’t suddenly stop, nor do they transition from stopped to moving without a period of acceleration An object being animated with an EASEIN interpolator starts out slow, speeds up for a short period, then travels at a constant speed for the remainder of the animation

Conversely, a node being animated with an EASEOUT interpolator starts moving much like a linear interpolation, but just before the end of the animation the node slows to a stop

The interpolator EASEBOTH combines these two periods of acceleration and deceleration into a single animation, so a node will start slowly, travel at a constant speed, then slow to a stop The screenshot in Figure 5-2 presents the EASEBOTH interpolator, showing the slight curves at the beginning and end of the interpolation

93

Figure 5-2 The EaseBoth interpolator

Spline

A spline Interpolator can be used to create a number of different animations, by specifying different

parameters In general a spline is a type of curve that is described by four points, a start point, an end

point, and two control points For the sake of interpolation, the start and end points are considered

fixed, and what is specified when creating a spline interpolator are the control points

Many drawing applications have a tool that allows the user to create a line and then adjust the curve

by moving the control points

Figure 5-3 shows a spline curve that can be modified

94

Figure 5-3 Spline interpolator

By moving the sliders at the bottom of the screen, the control points can be relocated to create a number of different curves One considerable limitation of the spline is its inability to create curves that extend beyond 1.0 or below 0.0 This limitation is a characteristic of the JavaFX API, not an inherent limitation of splines in general

Custom Interpolators

The default interpolators are a good start, but eventually a designer will want more control over the animations For example, the default set of interpolators provides no way of creating an animation that extends beyond the start and end values Creating an interpolator is very simple; creating an interpolator that looks good is a bit more complex The following section describes how to implement an interpolator and provides a number of examples

95

Extending Interpolator

You can extend the class Interpolator to create a custom interpolator Interpolator has one method

that must be overridden The code in Listing 5-3 provides a trivial example

Listing 5-3 TrivialInterpolator.fx

public class TrivialInterpolator extends Interpolator{

public override function interpolate(start:Object,end:Object,fraction:Number):Object{

var s:Number = (start as Number);

var e:Number = (end as Number);

fraction, which is of type Number The idea is that the function will return a value, which is a certain

value between start and end The example in Listing 5-3 is the same as the linear interpolator If 10.0

and 20.0 are passed in for start and end, and 0.7 is passed in for the fraction, then the function is being asked for an appropriate value for an animation that is 70% complete In this case, the value would be

17.0

After implementing a number of interpolators, it becomes obvious that the preceding code, which finds the value between start and end, is boilerplate code, and the interesting part is figuring out what to

do with the fraction For example, how does the EASEBOTH interpolator create those slopes at either end

of the line? It is best to think of an interpolator as a function that takes a value between 0.0 and 1.0 and generally returns value within the same range The function should probably return 0.0 for 0.0 and 1.0

for 1.0 To facilitate this concept, JavaFX provides a utility class that can be extended instead of

Interpolator; this class is called SimpleInterpolator The example in Listing 5-3 can be rewritten as in

Listing 5-4

Listing 5-4 TrivialSimpleInterpolator.fx

public class TrivialSimpleInterpolator extends SimpleInterpolator{

public override function curve(fraction:Number):Number{

return fraction;

}

}

Since the examples in this book will be focusing on interpolating numbers, the function curve

makes a lot more sense—for starters it returns a Number, which all of these examples will return

■ Tip Interpolators work with values besides Numbers, such as Colors

96

Quadratic Interpolator

While the spline interpolator can produce a large range of curves, sometimes it is desirable to create an interpolator that uses a quadratic function to describe this curve For example, the effect of gravity on a falling body is best modeled with a quadratic function A quadratic function has the form:

Listing 5-5 shows how a quadratic function is expressed in code

Listing 5-5 QuadraticInterpolator.fx

public class QuadraticInterpolator extends SimpleInterpolator {

public var a = 1.0 on replace{

b = 1.0 - a;

}

var b:Number = 1.0 - a;

public override function curve(fraction:Number):Number{

return (a*fraction*fraction + b*fraction);

}

}

In Listing 5-5, the function curve takes a fraction and calculates a value based on the values of a and

b This function will always return 0.0 for the fraction 0.0 (since anything times 0 is 0) and will also return 1.0 for 1.0, since as a changes, b will be recalculated to balance the equation The screenshot in Listing 5-4 shows this interpolator in action

The slider at the bottom of Figure 5-4 allows the value of a to be set, and the calculated value of b is displayed Note the parabolic curve produced

Download at WoweBook.com

97

Figure 5-4 Quadratic

Cubic Interpolator

Like the quadratic interpolator, the cubic interpolator is based on a polynomial expression Cubic

functions can produce more complex curves than quadratic functions, and are characterized by having a vertical point of inflection That is to say, they go up, then down, then back up again

Cubic functions are of the form

ax 3 + bx 2 + cx + d = 0

public class CubicInterpolator extends SimpleInterpolator {

public var a = 1.0 on replace{

public override function curve(fraction:Number):Number{

return (a*fraction*fraction*fraction + b*fraction*fraction + c*fraction);

}

}

The implementation of the CubicInterpolator in Listing 5-6 looks a lot like the

QuadraticInterpolator—the coefficients a and b can be set, while the coefficient c is solved for The function curve simply adds up the terms A cubic function was used to produce the curve in Figure 5-5, which shows the signature up and down wave pattern that identifies a cubic function

99

Figure 5-5 Cubic interpolator

Polynomial Interpolator

The QuadraticInterpolator allows the creation of nice, clean curves, while the CubicInterpolator can

create curves of more complexity It follows that the more terms in the function, the more complex the curve that can be expressed So creating a function with 4, 5, or even more terms will generate

increasingly interesting curves

The general term for functions like the quadratic and cubic functions is polynomial While a

quadratic function has a term with a power of 2 and a cubic function has a term with the power of 3, a

polynomial can have the highest power of any value Specifically, the form the polynomial is:

axn + bxn-1 + cxn-2 … ix2 + jx + k = 0

The implementation of the quadratic and cubic interpolators suggests that an interpolator could be created that implements any number of terms The code in Listing 5-7 shows how this is done

100

Listing 5-7 PolynomialInterpolator.fx

public class PolynomialInterpolator extends SimpleInterpolator{

public var solveFor = 0 on replace{

public override function curve(fraction:Number):Number{

var power = fraction;

Instead of specifying a, b, c, and so on, the implementation above uses a Sequence called

coefficients to store an arbitrary number of terms It should be pointed out that coefficients stores in the sequence in the reverse order of the function in Listing 5-7 So, coefficients[0] is the least

significant term

The variable solveFor is used to keep track of which coefficient must be solved for when one of the others changes This is an improvement over the previous versions, where the least significant

coefficient was always solved for

The function solve is called every time the Sequence coefficients changes and once during init time The function solve calculates a value for one of the coefficients to make sure the function always creates a curve that passes through the origin and the point 1,1

101

The function curve simply adds up each term, increasing the power with each term The screenshot

in Figure 5-6 shows just how interesting the curves can get

Figure 5-6 Polynomial interpolation

Windup-Overshoot Interpolator

The custom interpolators defined up to this point allow a developer so specify a huge number of

different interpolations and this flexibility is wonderful However, when designing an application, it is

desirable to have a few well-defined interpolators that are used over and over again This example shows how to take a powerful interpolator and create a handful of good choices, which can then be reused

whenever needed

The ease in/out interpolators are examples of this kind of simplification; they are probably

implemented with the spline interpolator, but the API hides the details All the designer and developer know is that there are a number of pre-built interpolators that produce nice results This makes the

103

Figure 5-7 The Windup Overshoot interpolator

As you can see, this interpolator is designed to animate nodes beyond the bounds of the start and

end This gives a certain amount of enthusiasm to an animation and works well with popup menus and other animated UI controls

Step Interpolator

While most things in the world move with smooth curves, there are human-made things that may

appear to move instantly from one place to another For example, the second hand on some analog

clocks appears to jump from second to second Of course, the hand simply moves very quickly from

second to second, but in order to capture that tick-tick-tick feeling, an interpolator that jumps from

value to value can be used

The code in Listing 5-9 creates an interpolator that takes another interpolator and breaks it up into a number of steps

104

Listing 5-9 StepInterpolator.fx

public class StepInterpolator extends Interpolator{

public var interpolator = Interpolator.LINEAR;

public var steps = 7;

public override function interpolate(start:Object,end:Object,fraction:Number):Object{ var s = (start as Number);

var e = (end as Number);

var range = e-s;

var value:Number = interpolator.interpolate(start, end, fraction) as Number;

var stepSize = range/steps;

to see which step it most closely matches Figure 5-8 shows the step function being applied to the default linear interpolator, and Figure 5-9 shows a step interpolator applied to the polynomial interpolator used earlier