Easing - iOS Core Animation - page 216

CAKeyframeAnimation has a timingFunctions property, which is an NSArray . We can
use this to specify a different timing function for each step in the animation. The number of
functions specified must be equal to the number of items in the keyframes array minus one ,
because the function describes the animation velocity between each pair of keyframes.
In this case, we actually want to use the same easing function throughout, but we still need
to provide an array of functions so that the animation knows that the function should be
repeated for each step instead of applied once across the whole sequence. We simply use an
array containing multiple copies of the same function (see Listing 10.3).
If you run the updated project, you will find that the animation now looks a bit more
natural.
Listing 10.3 Using CAMediaTimingFunction with CAKeyframeAnimation
@interface ViewController ()
@property ( nonatomic , weak ) IBOutlet UIView *layerView;
@property ( nonatomic , weak ) IBOutlet CALayer *colorLayer;
@end
@implementation ViewController
- ( void )viewDidLoad
{
[ super viewDidLoad ];
//create sublayer
self .colorLayer = [ CALayer layer ];
self .colorLayer. frame = CGRectMake ( 50.0f , 50.0f , 100.0f , 100.0f );
self .colorLayer. backgroundColor = [ UIColor blueColor ]. CGColor ;
//add it to our view
[ self .layerView. layer addSublayer : self .colorLayer];
}
- ( IBAction )changeColor
{
//create a keyframe animation
CAKeyframeAnimation *animation = [ CAKeyframeAnimation animation ];
animation. keyPath = @"backgroundColor" ;
animation. duration = 2.0 ;
animation. values = @[
( __bridge id )[ UIColor blueColor ]. CGColor ,
( __bridge id )[ UIColor redColor ]. CGColor ,
( __bridge id )[ UIColor greenColor ]. CGColor ,