Graphics Reference
In-Depth Information
Figure 8.1
The spaceship image layer moving along a Bézier curve
If you run the example, you may notice that the ship animation looks a bit unrealistic
because it's always pointing directly to the right as it moves rather than turning to match
the tangent of the curve. You could animate the orientation of the ship as it moves by
adjusting its
affineTransform
, but that would be tricky to synchronize with the other
animation.
Fortunately, Apple anticipated this scenario, and added a property to
CAKeyframeAnimation
called
rotationMode
. Set
rotationMode
to the constant value
kCAAnimationRotateAuto
(see Listing 8.7), and the layer will automatically rotate to
follow the tangent of the curve as it animates (see Figure 8.2).
Listing 8.7
Automatically Aligning Layer to Curve with
rotationMode
- (
void
)viewDidLoad
{
[
super
viewDidLoad
];
//create a path
...
//create the keyframe animation
CAKeyframeAnimation
*animation = [
CAKeyframeAnimation
animation
];
animation.
keyPath
=
@"position"
;
animation.
duration
=
4.0
;
animation.
path
= bezierPath.
CGPath
;
animation.
rotationMode
=
kCAAnimationRotateAuto
;
