Wednesday, June 12, 2013

CAAnimation timingFunction example in Objective C (iOS).

CAAnimation timingFunction

An optional timing function defining the pacing of the animation.

@property(retain) CAMediaTimingFunction *timingFunction

Discussion of [CAAnimation timingFunction]
Defaults to nil, indicating linear pacing.

CAAnimation timingFunction example.
When animating the movement of a UIView within a begin / commit animation block, you can use the following method to set the animation timing curve:

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
When animating a layer via CAAnimation, you can use the following to set the timing function there:

[animation setTimingFunction:kCAMediaTimingFunctionEaseInEaseOut];
Finally, when wrapping a series of animations in a CATransaction, you can use the following to set the coordinated timing function of all the animations:

[CATransaction setAnimationTimingFunction:kCAMediaTimingFunctionEaseInEaseOut];

Example of [CAAnimation timingFunction].
- (void)viewDidLoad {
    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 50.0, 50.0)];

    v.backgroundColor = [UIColor redColor];
    CGFloat y = self.view.bounds.size.height;
    v.center = CGPointMake(self.view.bounds.size.width/2.0, 50.0/2.0);
    [self.view addSubview:v];

    //[CATransaction begin];

    CAKeyframeAnimation * animation;
    animation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"];
    animation.duration = 3.0;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;

    NSMutableArray *values = [NSMutableArray array];
    NSMutableArray *timings = [NSMutableArray array];
    NSMutableArray *keytimes = [NSMutableArray array];

    //Start
    [values addObject:[NSNumber numberWithFloat:25.0]];
    [timings addObject:GetTiming(kCAMediaTimingFunctionEaseIn)];
    [keytimes addObject:[NSNumber numberWithFloat:0.0]];

    //Drop down
    [values addObject:[NSNumber numberWithFloat:y]];
    [timings addObject:GetTiming(kCAMediaTimingFunctionEaseOut)];
    [keytimes addObject:[NSNumber numberWithFloat:0.6]];

    // bounce up
    [values addObject:[NSNumber numberWithFloat:0.7 * y]];
    [timings addObject:GetTiming(kCAMediaTimingFunctionEaseIn)];
    [keytimes addObject:[NSNumber numberWithFloat:0.8]];

    // fihish down
    [values addObject:[NSNumber numberWithFloat:y]];
    [keytimes addObject:[NSNumber numberWithFloat:1.0]];
    //[timings addObject:GetTiming(kCAMediaTimingFunctionEaseIn)];


    animation.values = values;
    animation.timingFunctions = timings;
    animation.keyTimes = keytimes;

    [v.layer addAnimation:animation forKey:nil];  

    //[CATransaction commit];

}

CAAnimation timingFunction example.
[myLayer addAnimation:frameAnimation forKey:@"frame"];
You may also set an action to the layer to make all frame changes animated with your animation:

CABasicAnimation *frameAnimation = [CABasicAnimation animation];
frameAnimation.duration = 2.5;
frameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

myLayer.actions = [NSDictionary dictionaryWithObjectsAndKeys:frameAnimation, @"frame", nil];

End of CAAnimation timingFunction example article.