Listing 5-3 shows the code for method viewAnimation1.

- (void)viewAnimation1 {
    // Reset properties to default values
    theChicken.transform = CGAffineTransformIdentity;
    theChicken.frame = CGRectMake(15, 144, 62, 90);

    [UIView beginAnimations:@"viewAnimation1" context:theChicken];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:
        @selector(animationDidStop:finished:context:)];

    theChicken.frame = CGRectMake(15, 330, 62, 90);

    [UIView commitAnimations];
}

The first line of code in the viewAnimation1 method resets theChicken's properties to default values. The transform property controls rotation, scaling (size changes), and translation (position changes) using a set of functions that will be discussed in the "UIView Transforms" section later in this chapter. The CGAffineTransformIdentity constant resets the property to a value that essentially means "no transform." After resetting the transform, the code sets theChicken's frame property to the starting position for this animation.

The next line of code starts an animations block with the animation identifier viewAnimation1 and theChicken image view as the context parameter.

Following that, the code sets the animation delegate:

[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

The animation delegate receives notifications when the animation is about to start and when the animation has stopped through two selectors you can assign. We assign the selector named animationDidStop:finished:context: to be called when the animation stops. Setting the delegate and selectors is optional. But in this sample project, we must always set a delegate and delegate method for stopping the animation, because we need to reenable the animateButton at the end of each animation. You can also assign a selector to be notified when the animation is about to start, if you need that functionality, by calling the UIView class method setAnimationWillStartSelector: and passing the appropriate selector.

In the next line of code in the viewAnimation1 method, we change the frame of the image view theChicken:

theChicken.frame = CGRectMake(15, 330, 62, 90);

The initial position of theChicken's in the Interface Builder .xib file is at coordinates 15 and 144 for the x and y values. Its initial size is a width of 62 and a height of 90. So this line of code simply moves theChicken down the screen to y coordinate 330.

The last line of code in the viewAnimation1 method commits the animation, closing the animation block:

[UIView commitAnimations];

This makes Core Animation play an animation that moves theChicken down the screen in 0.2 second, to stand at the top of the toolbar. The duration of 0.2 second is the default of a UIView animation, unless you set a different duration using the UIView method setAnimationDuration:.

Once the animation stops, Core Animation calls the method we set earlier for notifications that the animation ended. Listing 5-4 shows the code for this delegate method.

- (void)animationDidStop:(NSString *)theAnimation finished:(BOOL)flag
context:(void *)context
{
    animateButton.enabled = YES;
}

The signature for this method is the standard signature for the animationDidStop delegate. You can call the method anything you want, but if the method takes parameters, the parameter types must match this signature, or the method may cause a crash.

The first parameter must be a pointer to an NSString instance. It will be set to the value you passed for the animation name in the beginAnimations:context: call for this animation. The second parameter, if there is one, must be a Boolean flag. The value passed will be YES if the animation ran to completion or NO if it was interrupted. The current animation can be interrupted by another animation block being committed before the current animation plays out.

The last parameter to the delegate method must be a void pointer. It will be set to the value of the context parameter passed in the beginAnimations:context: for the current animation calling the animation delegate.

Listing 5-5 shows the method viewAnimation2 and its animation stop delegate method.

- (void)viewAnimation2 {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationDelegate:selfs];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop)];

theChicken.frame = CGRectMake(15, 144, 62, 90);

    [UIView commitAnimations];
}

- (void)animationDidStop {
    animateButton.enabled = YES;
}

In this listing, the animation block begins with no parameters set for the animation identifier and for the context. In the next line of code, we set the animation duration to 1 second by calling the setAnimationDuration: class method.

Rather than set the animationDidStop selector to the standard signature, we pass in a selector with no parameters. This has no danger of causing a crash, as any parameters passed by the caller will be ignored.

After setting the delegate and animation stop selector, the code sets the frame for theChicken image view back to the original x and y coordinates of 15 and 144. Then we commit the animation to close the animation block.

When this animation plays, theChicken image view slides back up to the original coordinates over the length of 1 second. If you look carefully, you will see the animation starts moving the image view slowly, picks up speed as it progresses, and then slows down as the animation is about to end. This is the default animation curve used by Core Animation.

When making an animation, the result can look rather mechanical if the animator just changes the movement of the animated component in an evenly spaced manner between frames. Through decades of study and practice in the art of animation, professional animators have learned that there are ways to animate a scene and add a touch of variation to their work. These variations make the animation look more interesting than just moving something from position A to B in a straight line.

Animation curves are a property of an animation you can set to tell Core Animation to apply the changes to the component you want to animate in an uneven manner, to add these variations to the animated result. These curves modify how Core Animation processes the animation. For example, it may begin slowly and pick up acceleration as the animation progresses, or it might start by moving rapidly and then slow down as it reaches the end.

You set the animation curve by calling the UIView class method setAnimationCurve:, passing one of the following curve constants:

So far, you've learned that animations have a default duration of 0.2 second and that they have a default animation curve that makes the animation start slowly, pick up speed for about half the duration, and then slow down until it stops for the other half of the duration. You also learned you can set delegate methods to be notified when the animation is about to start and when it has come to an end.

The viewAnimation3 method, shown in Listing 5-6, demonstrates a few more animation properties.

- (void)viewAnimation3 {
    [UIView beginAnimations:@"viewAnimation3" context:theRoad];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDuration:0.5];

    [UIView setAnimationRepeatAutoreverses:YES];
    [UIView setAnimationRepeatCount:2];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:
        @selector(theRoadAnimationDidStop:finished:context:)];

    theRoad.alpha = 0.0;
    [UIView commitAnimations];
}

- (void)theRoadAnimationDidStop:(NSString *)theAnimation finished:(BOOL)flag
context:(void *)context
{
    ((UIView *)context).alpha = 1.0;
    animateButton.enabled = YES;
}

The viewAnimation3 method begins by starting an animation block, passing in the string "viewAnimation3" as the animation identifier and the image view called theRoad as the context parameter.

The next method sets the animation curve to linear:

[UIView setAnimationCurve:UIViewAnimationCurveLinear];

This means the animated properties will change at constant speed, from the current value to the value set within the animation block.

The next line of code sets the animation duration to half a second:

[UIView setAnimationDuration:0.5];

The following lines of code set the animation to autoreverse and to play twice:

[UIView setAnimationRepeatAutoreverses:YES];
[UIView setAnimationRepeatCount:2];

The animation will play forward for the duration set in the previous line, play backward for the same duration, and then repeat. This means that the animation plays forward once for half a second, then plays backward for half a second, then plays forward again for half a second, and once again backward for half a second. The animation's total play time will be 2 seconds.

By default, animations don't autoreverse and the repeat count is set to 0, which means there is no repetition. The autoreverse setting is ignored if the repeat count is 0.

The repeat count can be fractional, which means the animation will not play all the way through. If you set the repeat count to 0.5, for example, the animation will stop at the exact halfway point of the duration setting. If you set the repeat count to 6.5, the animation will repeat six times, then stop halfway through a seventh repetition.

The next two lines of code set the animation delegate object and the name of the method that will be called when the animation stops:

[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(theRoadAnimationDidStop:finished:context:)];

The selector's signature matches the standard signature for this delegate method. In this particular delegate method, it means the animation context will be passed as the third parameter to the method. We will make use of the context parameter in the animation delegate method to set the object's property to its final value.

This next line identifies the object and property being changed in the animation:

theRoad.alpha = 0.0;

The image view named theRoad has a current alpha value of 1, making theRoad fully opaque. In this animation, it is being changed to 0, fully transparent.

In the last line of code in this method, the animation block is closed with the committing of the animation to the Core Animation queue.

[UIView commitAnimations];

In essence, the viewAnimation3 method makes theRoad fade out and fade back in twice over a length of 2 seconds.

The next section of code is the animation stop delegate method:

- (void)theRoadAnimationDidStop:(NSString *)theAnimation finished:(BOOL)flag
context:(void *)context
{
    ((UIView *)context).alpha = 1.0;
    animateButton.enabled = YES;
}

In this method, we use the context parameter, which was set to theRoad at the start of the animation block in viewAnimation3. So the delegate method is setting theRoad's alpha property back to 1 now that the animation has ended.

The next view animation methods introduce a few new animation settings. Let's continue with Listing 5-7, which shows viewAnimation4.

- (void)viewAnimation4 {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDelay:0.5];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];

    [UIView setAnimationRepeatAutoreverses:YES];
    [UIView setAnimationRepeatCount:2];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:
        @selector(resetTheChickenProperties)];

    theChicken.frame = CGRectMake(15, 330, 62, 90);
    [UIView commitAnimations];
}

- (void)resetTheChickenProperties {
    theChicken.transform = CGAffineTransformIdentity;
    theChicken.frame = CGRectMake(15, 144, 62, 90);
    animateButton.enabled = YES;
}

The viewAnimation4 method introduces the concept of the animation delay. You can set a delay for the start of the animation by calling the UIView class method setAnimationDelay:. The animation delay defaults to a value of 0, and the setting accepts a fraction. In this code sample, the animation delay is set to 0.5 second.

The animation curve is set to ease-in. This curve is what you should use for animations simulating bouncing. This animation makes theChicken bounce on the toolbar a couple of times.

Listing 5-8 shows the code for viewAnimation5, which uses the ease-out animation curve.

- (void)viewAnimation5 {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop)];

    theChicken.frame = CGRectMake(235, 144, 62, 90);
    [UIView commitAnimations];
}

The ease-out animation curve is perfect for simulating throwing an object up in the air and seeing gravity slow it down over time. It's the opposite of the bouncing effect.

The next three animations introduce the transform property. The transform property is used to affect the size (scale), position (translation), and/or rotation of a UIKit component, using the following Core Graphics functions:

Listing 5-9 shows the viewAnimation6 and viewAnimation7 methods. These two methods demonstrate scaling and rotation transforms.

- (void)viewAnimation6 {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop)];

    theChicken.transform = CGAffineTransformMakeScale(1.25, 1.25);
    [UIView commitAnimations];
}

- (void)viewAnimation7 {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop)];

    CGAffineTransform transform1 = CGAffineTransformMakeScale(1, 1);
    CGAffineTransform transform2 =
        CGAffineTransformMakeRotation(179.9 * M_PI / 180.0);

theChicken.transform = CGAffineTransformConcat(transform1,
                                                   transform2);
    [UIView commitAnimations];
}

In the viewAnimation6 method, we are scaling theChicken to 1.25 times its original size. In the viewAnimation7 method, theChicken is scaled back down to original size. And at the same time, it rotates theChicken clockwise by 179.9 degrees. (Remember that a positive value means clockwise rotation; a negative value means counterclockwise rotation.)

The viewAnimation7 method shows that transforms can be combined. The result of two CGAffineTransformMake* functions can be used as inputs to the CGAffineTransformConcat function. This result can be concatenated with a third, and the result concatenated with a fourth, and so on. In this case, we combine two transforms and assign them to the component's transform property.

The viewAnimation8 method, presented in Listing 5-10, shows another way of combining transforms.

- (void)viewAnimation8 {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:
        @selector(resetTheChickenProperties)];

    CGAffineTransform transform1 =
        CGAffineTransformMakeTranslation(-220, 0);
    theChicken.transform =
        CGAffineTransformRotate(transform1, 359.9 * M_PI / 180.0);
    [UIView commitAnimations];
}

In the viewAnimation8 method, the code creates a transform, which applies a translation of 220 pixels to the left of the current position. When applied to theChicken at this point in the animations, this transform essentially moves it to the original frame coordinates set in the CoreAChickenViewController.xib file. Before applying this transform, though, we call the function CGAffineTransformRotate, and apply to the translation transform a clockwise rotation transform of 359.9 degrees. This completes the half circle rotation started in viewAnimation7. These combined transforms are applied to theChicken, and then the animation block is closed and the animation committed.

If you want to see a finished working version of the code up to this part of the chapter, you can check out the Xcode project in the folder called CoreAChicken UIView animations, in the source code for this chapter.

Besides animating the movement and opacity of UI components such as image views, UIKit's integration of Core Animation also has the ability to animate transitions that occupy the whole screen. These work well to swap areas of the screen out and replace that area with other components.

The API for using UIView transitions is called setAnimationTransition:forView:cache:. This API takes as parameters a transition type, the superview of the components to be transitioned, and a Boolean describing whether you want Core Animation to cache the look of the superview before and after the animation. This caching improves Core Animation's performance.

Four transition types are used by UIView transitions:

The viewAnimation9 and viewAnimation10 methods use view transitions to hide firstView and show secondView and vice versa. Listing 5-11 shows these methods.

- (void)viewAnimation9 {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp
        forView:self.view cache:YES];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop)];

    firstView.hidden = YES;
    secondView.hidden = NO;
    [UIView commitAnimations];
}

- (void)viewAnimation10 {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
        forView:self.view cache:YES];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop)];

    firstView.hidden = NO;
    secondView.hidden = YES;
    [UIView commitAnimations];
}

The code for viewAnimation9 should look familiar by now. It starts an animation block, sets an animation duration and animation curve, sets delegates and delegate selectors, and commits the animation to close the animation block. The main difference is the use of the setAnimationTransition:forView:cache: method.

[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp
        forView:self.view cache:YES];

This line of code sets the animation transition type to curl up. We specify the transition is for the view controller's view, which contains both firstView and secondView. We also specify that Core Animation should cache the animation for the best performance.

The next relevant lines of code are the hiding and showing of the views:

firstView.hidden = YES;
    secondView.hidden = NO;

We simply hide firstView and show secondView. When the animation is committed, Core Animation whisks firstView away with a page-curl animation about a second long, with secondView shown as firstView animates away.

In the viewAnimation10 method, the relevant code is the line that sets the animation transition type:

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft

forView:self.view cache:YES];

Here, we specify the transition type that flips the view, with the new view coming from the left side of the screen.

In this view animation, we show the firstView and hide the secondView:

firstView.hidden = NO;
    secondView.hidden = YES;

We are essentially undoing the work of the previous animation, but with a different transition type. When this animation is committed, Core Animation flips the screen from the left, hiding secondView behind firstView, which is again the only visible view.

There are other transition animations the iPhone can do, but these require coding directly with Core Animation APIs. Our exploration of UIView animation methods concludes, and we move on to the more complex APIs offered by Core Animation itself.

You can trigger an animation on a layer simply by changing one of the layer properties that can be animated. For a UIKit component, you reference the layer property, and then change the property on the layer, as in this example:

theChicken.layer.position = CGPointMake(225, 144);

This is called an implicit animation, and does not require the creation of an animation block. Just change one or several properties, and an animation will be played on the layer, changing the property or properties from the current value to the new value.

Implicit animations have a default duration of 0.25 seconds. You can change the duration of an implicit animation by setting the duration value in the implicit Core Animation transaction, as follows:

[CATransaction setValue:[NSNumber numberWithFloat:1.0]
                             forKey:kCATransactionAnimationDuration];

You change the animation duration value before you modify the property you want to animate. Once changed, the animation will play for the specified duration.

Implicit animations are played with a linear animation curve. Core Animation calls animation curves timing functions (covered in the next section). Here is an example of changing to the ease-in, ease-out timing function:

[CATransaction setValue:kCAMediaTimingFunctionEaseInEaseOut
                             forKey:kCATransactionAnimationTimingFunction];

One thing to remember is that the animation duration and timing function are reset back to default values after the implicit animation plays to the end. Unless you create an explicit transaction and retain it for reuse at later points, the values you give these settings are lost once the implicit transaction is finished playing.

The Core Animation term timing function seems like an important distinction, but it's just another name for animation curve. You assign the timing function by calling the class method functionWithName: in the CAMediaTimingFunction class. This class method takes as a parameter the type of timing function you want to use. The Core Animation timing functions are as follows:

kCAMediaTimingFunctionDefault is the default timing function for all Core Animation classes, except transitions. As noted, the default timing function for transitions is kCAMediaTimingFunctionLinear.

Now that we've covered the basics of implicit animations on Core Animation layers, let's cover one explicit animation class in the Core Animation arsenal: layer animation transitions. Core Animation provides four transition types:

Let's expand the animate method to demonstrate these transitions, as shown in Listing 5-12. The code in bold represents the code you need to add or change.

case 10:
    [self viewAnimation10];
    break;
case 11:
    [self transition1];
    break;
case 12:
    [self transition2];
    break;
case 13:
    [self transition3];
    break;
default:
    [self transition4];
    counter = 0;
    break;

This code adds four new switch case statements and animation methods to the animate method, called transition1 through transition4. Let's look at each of these methods.

- (void)transition1 {
    CATransition *transition = [CATransition animation];
    transition.duration = 0.75;
    transition.timingFunction = [CAMediaTimingFunction
        functionWithName:kCAMediaTimingFunctionLinear];
    transition.delegate = self;

    transition.type = kCATransitionFade;

    [self.view.layer addAnimation:transition forKey:@"transition1"];

    firstView.hidden = YES;
    secondView.hidden = NO;
}

CATransition *transition = [CATransition animation];

transition.duration = 0.75;
    transition.timingFunction = [CAMediaTimingFunction
        functionWithName:kCAMediaTimingFunctionLinear];

transition.delegate = self;

transition.type = kCATransitionFade;

[self.view.layer addAnimation:transition forKey:@"transition1"];

firstView.hidden = YES;
    secondView.hidden = NO;

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    animateButton.enabled = YES;
}

- (void)transition2 {
    CATransition *transition = [CATransition animation];
    transition.duration = 0.75;
    transition.timingFunction = [CAMediaTimingFunction
                        functionWithName:kCAMediaTimingFunctionEaseIn];
    transition.delegate = self;

    transition.type = kCATransitionMoveIn;
    transition.subtype = kCATransitionFromRight;

    [self.view.layer addAnimation:transition forKey:@"transition2"];

    firstView.hidden = NO;
    secondView.hidden = YES;
}

- (void)transition3 {
    CATransition *transition = [CATransition animation];
    transition.duration = 0.75;
    transition.timingFunction = [CAMediaTimingFunction
                        functionWithName:kCAMediaTimingFunctionEaseOut];
    transition.delegate = self;

    transition.type = kCATransitionPush;
    transition.subtype = kCATransitionFromLeft;

    [self.view.layer addAnimation:transition forKey:@"transition3"];

    firstView.hidden = YES;
    secondView.hidden = NO;
}

- (void)transition4 {
    CATransition *transition = [CATransition animation];
    transition.duration = 0.75;
    transition.timingFunction = [CAMediaTimingFunction
                        functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.delegate = self;

    transition.type = kCATransitionReveal;
    transition.subtype = kCATransitionFromRight;

    [self.view.layer addAnimation:transition forKey:@"transition4"];

    firstView.hidden = NO;
    secondView.hidden = YES;
}