Java Reference
In-Depth Information
values: [
group.translateX => startingX + totalWidth tween inter,
clip.translateX => -totalWidth tween inter
]
action: function(){
delete group.content;
replacementNode.translateX = startingX;
replacementNode.translateY = startingY;
insert replacementNode before parent.content[index];
}
},
KeyFrame{
time: 1s + 1ms
action: doAfter
}
]
}
In Listing 5-11 we can see that only three lines need to be modified to use an
Interpolator
; the lines
that are different are shown in bold. Obviously the signature of the
function
must be changed to take an
Interpolator
. The other change is that
Interpolator
inter
is used in the
Timeline
to
tween
the values of
the animation. The other transitions have been modified in a similar way—check out the source code for
details. Let's take a candid exploration of the visual effect each interpolator has on each transition.
Fade Transition
The fade transition simply fades out one node while fading in another, and by applying different
interpolators, the rate at which the fade takes place is altered. The linear and ease interpolators are
pretty similar, and it would not be obvious which one is being used if you did not know. That said, I do
think the ease interpolator is slightly nicer than the linear, and the way the ease interpolator ends makes
it feel more deliberate.
The spline interpolator provided in Listing 5-11 is fast at the ends and slow in the middle. This gives
a sense of hesitation, or that the transition is in some way difficult. This effect could be used when the
user makes a final decision about something, as it might reinforce the sense of finality.
I deliberately selected a polynomial interpolator that is sort of weird. When used with the fade
transition it is hard to find any value in it at all. This is partly due to the fact that this interpolator extends
beyond the 1.0 range value, and a node with opacity greater than 1.0 or less than 0.0 has no meaning.
The windup interpolator has the same limitation as the polynomial interpolator. The first and last
parts of this interpolator create values that make no sense for opacity. Hence the transition seems to be
shorter than the others, since only the middle range of the interpolator provides any visual changes.
So while the exotic interpolators didn't do much for this transition, there was something to be
learned regarding the built-in interpolators. They offer two very different experiences.
Slide Transition
The slide transition animates one node to the right, while the new node follows it. A clipping area
around the starting location of the first node makes it look like one node is sliding out to make room for
