Main Scene and Game State - Learn SpriteBuilder for iOS Game Development - page 216

Editing the Entry Animation
Select the entry Timeline again. This is the first one you'll animate. The idea is that the
buttons are initially off-screen and come zapping in. This mandates a very short anima-
tion—after all, the user will want to use your app quickly and not wait for its animations
to finish, no matter how hard you worked on them.
Click the duration box as seen in Figure 5-2 to edit the Timeline duration. Set it to 1
second and 15 frames, or 00:01:15 . This equals 1.5 seconds since SpriteBuilder plays
back animations at 30 frames per second.
Select the logoAndButtons node, and move it just outside the left side of the layer. An X
position of -20 (in %) will do fine. Then move the Timeline Cursor to the far left, and
press the P key to create a keyframe. Move the Timeline Cursor to the far right, and press
P again to create a second keyframe. Edit the logoAndButtons node position so it has an X
position of 50 (in %). This will create a dull, slide-in motion, but the good thing is that
logo and buttons follow suit.
To spice up the movement, right-click the Keyframe Segment and select the Elastic Out
easing mode. This will be a bit too bouncy initially. Right-click the Keyframe Segment
again. With either one of the Elastic or regular Ease modes selected, the Easing Setting
menu item will be enabled; click it to open a tiny popup window that allows you to set an
ambiguous floating-point value.
In this case, the value is called Period , and it defines how springy the animation is. The
lower the value is, the more the node will move back and forth before coming to rest. In
this case, enter a value of 0.9 , click Done , and play the animation again. It's less springy
now.

Caution The Easing Setting value will be reset to its default value if you
change the Keyframe Segment's easing mode to another easing mode. I'm
afraid you will have to re-enter the setting value whenever you select another
easing mode.

The entry animation can certainly be spiced up some more. A nice effect is to scale in the
buttons at the appropriate time. Repeat the following steps for both the play and settings
sprite nodes:

1. Select the sprite node ( play or settings ).

2. Move the Timeline Cursor to about the middle of the timeline.