Timelines & Triggers - Learn SpriteBuilder for iOS Game Development - page 137

before increasing to a value slightly above 200 and finally closing in at 200. The duration
between two keyframes determines over how many frames this animation is interpolated.
The longer the animation is, the smoother the interpolation can be.
Caution If there's very little time between two keyframes—for example, 10
frames or less—you will hardly notice the easing effect. Say the rotation anima-
tion had three frames to interpolate between, the first frame would start the rota-
tion property at 100, and the second frame would set it to 150 even for the
Back In/Out mode because the third frame rotation property has to be at the
other keyframe's value of 200. An easing mode is only effective and will only
resemble the curves in Figure 5-5 when there's at least half a second between
the two keyframes and the game runs at 30 fps or more. For sequences shorter
than half a second, you may want to avoid using easing modes other than Lin-
ear or Instant .
The various easing modes are best seen in action, so you should definitely experiment a
lot, especially with the combination of various easing modes along several Keyframe Seg-
ments and at varying durations. As an exercise, try adding another sequence animating the
doughnut's rotation property ( R key) over three or more keyframes so that the doughnut
sways slightly from left to right and back.
If adding a keyframe fails, possibly with an error sound, you may not have a node selec-
ted.
If you need to remove a keyframe, select its handle and press Backspace or right-click the
keyframe handle and select Delete from the context menu.
Clicking and dragging is the way to move keyframes to lengthen or shorten the duration to
the previous and next keyframes.
Tip In order to smoothly loop an animation, you'll need one keyframe at both
ends of the timeline, with both having the exact same values for the animated
property. This ensures that the animation transitions smoothly when it passes
over the last keyframe and continues with the first.
If an animation acts erroneously when passing over a keyframe, check whether
there are two or more keyframes at the exact same location. Try moving the