Step, linear and cubic tracks

since 0.7.0 Animation

Open the live demo · Read the source · View on GitHub

The same three keyframes, read three different ways. AnimationTrack carries one AnimationInterpolation, and that alone decides whether a cube snaps, ramps or eases between the same two heights.

Step 1: One track for each interpolation #

Step holds the previous key until the next one arrives, so the red cube jumps rather than moves. Linear blends in a straight line, so the green cube rises at a constant rate. Cubic spline fits a curve through the keys using an in and out tangent per key; flat tangents, here, are enough to make it ease in and out rather than move at a constant rate like the green cube.

// The player writes a translation track's sampled (x, y, z) straight
// through `setPosition`, replacing whatever was there — so the column
// each cube stands in has to be baked into the track itself. A
// `setPosition` on the node instead would have held for exactly one
// frame, until `AnimationPlayer.play` below sampled time zero and
// snapped every cube back to x = 0, stacking all three on top of each
// other.
final AnimationTrack stepTrack = _bounceTrack(
  nodeIndex: 0,
  x: -1.4,
  interpolation: AnimationInterpolation.step,
);
final AnimationTrack linearTrack = _bounceTrack(
  nodeIndex: 1,
  x: 0.0,
  interpolation: AnimationInterpolation.linear,
);
final AnimationTrack cubicTrack = _bounceTrack(
  nodeIndex: 2,
  x: 1.4,
  interpolation: AnimationInterpolation.cubicSpline,
);

Step 2: One clip, one player, three targets #

Every track names a different node index, so one clip drives all three cubes at once. AnimationPlayer.targets is index-aligned with those track node indices, in the order the cubes were added.

final AnimationClip bounce = AnimationClip(
  name: 'bounce',
  tracks: <AnimationTrack>[stepTrack, linearTrack, cubicTrack],
);
_player = AnimationPlayer(
  clips: <AnimationClip>[bounce],
  targets: <AnimationTarget?>[_stepCube, _linearCube, _cubicCube],
)..play(0);

Step 3: Advance it #

_player.update(dt);

What to look at #

Watch the moment the bounce starts. The red cube (step) stays on the floor until the middle of the cycle and then jumps straight to the top. The green cube (linear) is already rising steadily. The blue cube (cubic) is barely moving yet: it eases into the rise and eases out of the top, so it starts and ends slower than the straight line does. Speed changes how fast the whole cycle plays, not which curve each cube follows.