Game Development Reference
In-Depth Information
Move the Timeline Cursor so that it is exactly on the middle keyframe. You'll know the
correct position when the Scale property values become editable on the Item Properties
tab. Use the Timeline Scale slider to zoom out the Timeline to make it easier to position
the Cursor. Once the Cursor is on top of the middle keyframe and the Scale property is ed-
itable, change the scale property values for both the X and Y axis to 1.3.
Now click the Play button on the Timeline Controls area and you'll see the doughnut
scales up and down. Toggle the loop button to keep playing the animation in a loop. When
you are done, stop the animation playback and drag the Timeline Cursor once more.
Notice how the Scale property values change as you move the Cursor between keyframes.
That shows you how the property values interpolate between two keyframes.
Looping Animations…Wheeeeee!
In order to make the animation loop in the game, not just SpriteBuilder, you'll have to
chain the Timeline to itself.
A Timeline Chain simply tells the animation to start playing another Timeline animation
when the timeline playback ends. Thus, chaining a Timeline animation to itself causes it
to loop. To do so, click on the Timeline Chain drop-down menu at the bottom, where it
says No chained timeline in Figure 5-1 , and select the Default Timeline from the list.
You can publish and run the project now to see the animation in action. As of now, the
doughnut scales up and down linearly.
Easing Animations with Ease
You can smooth out the animation using easing modes. Easing affects how the values
between two keyframes change over time. Different kinds of easing can be applied to each
Keyframe Segment.
To edit the easing mode, right-click in the Keyframe Segment. Usually there will be a
pink line between the two keyframes. This brings up a context menu with all the available
easing modes, as seen in Figure 5-4 .
Search WWH ::




Custom Search