Basic iPad Animation using Core Animation (Xcode 4)
| Previous | Table of Contents | Next |
| An iOS 4 iPad Graphics Drawing Tutorial using Quartz 2D (Xcode 4) | An iOS 4 iPad Core Animation Tutorial (Xcode 4) |
Learn SwiftUI and take your iOS Development to the Next Level
|
The majority of the visual effects used throughout the iOS 4 user interface on the iPad and iPhone are performed using Core Animation. Core Animation provides a simple mechanism for implementing basic animation within an iPad application. If you need a user interface element to gently fade in or out of view, slide smoothly across the screen or gracefully resize or rotate before the user’s eyes these effects can be achieved using Core Animation in just a few lines of code.
In this chapter we will provide an overview of the basics of Core Animation. The next chapter, entitled An iOS 4 iPad Core Animation Tutorial, will work through a simple example that animates the rotation, resizing and motion of an object on the iPad screen.
While much can be achieved with Core Animation, however, it should be noted that if you plan to develop a graphics intensive 3D style application then it is more likely that OpenGL ES will need to be used. That said core animation still provides a surprising amount of functionality for very little effort on the part of the iPad application programmer.
UIView Core Animation Blocks
The concept of Core Animation involves the implementation of so-called animation blocks. Animation blocks are used to mark the beginning and end of a sequence of changes to the appearance of a UIView and its corresponding subviews. Once the end of the block is reached the animation is committed and the changes are performed over a specified duration. For the sake of example, consider a UIView object that contains a UIButton connected to an outlet named theButton. The application requires that the button gradually fade from view over a period of 3 seconds. This can be achieved by making the button transparent through the use of the alpha property:
theButton.alpha = 0;
Simply setting the alpha property to 0, however, causes the button to immediately become transparent. In order to make it fade out of sight gradually we need to place this line of code in an animation block. The start of an animation block is represented by a call to the beginAnimations class method of the UIView class:
[UIView beginAnimations:nil context:nil];
The end of the animation block triggers the animation sequence through a call to the commitAnimations method:
[UIView commitAnimations];
A variety of properties may also be defined within the animation block. For example, the duration of the animation (in our hypothetical example this needs to be 3 seconds) can be declared by a call to the setAnimationDuration class method:
[UIView setAnimationDuration:3];
Bringing this all together gives us a code sequence to gradually fade out a button object over a period of 3 seconds:
[UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:3]; theButton.alpha = 0; [UIView commitAnimations];
Understanding Animation Curves
In addition to specifying the duration of an animation sequence, the linearity of the animation timeline may also be defined by calling the UIView setAnimationCurve class method. This setting controls whether the animation is performed at a constant speed, whether it starts out slow and speeds up and so on. There are currently four possible animation curve settings:
- UIViewAnimationCurveLinear – The animation is performed at constant speed for the specified duration.
- UIViewAnimationCurveEaseOut – The animation starts out fast and slows as the end of the sequence approaches
- UIViewAnimationCurveEaseIn – The animation sequence starts out slow and speeds up as the end approaches.
- UIViewAnimationCurveEaseInOut – The animation starts slow, speeds up and then slows down again.
Receiving Notification of Animation Completion
Once an animation sequence has been committed and is underway it may be necessary to receive notification when the animation is completed so that the application code can, for example, trigger another animation sequence. The UIView setAnimationDidStopSelector class method allows a method to be specified that will be called when the animation sequence is completed. For example, the following code fragment declares that the method named animationFinished is to be called at the end of the animation sequence:
[UIView setAnimationDidStopSelector:
@selector(animationFinished:finished:context:)];
Learn SwiftUI and take your iOS Development to the Next Level
|
-(void)animationFinished:(NSString *)animationID
finished:(NSNumber *)finished
context:(void *)context
{
// Code to be executed on completion of animation sequence
}
Performing Affine Transformations
Transformations allow changes to be made to the coordinate system of a screen area. This essentially allows the programmer to rotate, resize and translate a UIView object. A call is made to one of a number transformation functions and the result assigned to the transform property of the UIView object.
For example, to change the scale of a UIView object named myView by a factor of 2 in both height and width:
myView.transform = CGAffineTransformMakeScale(2, 2);
Similarly, the UIView object may be rotated using the CGAffineTransformMakeRotation which takes as an argument the angle (in radians) by which the view is to be rotated. The following code, for example, rotates a view by 90 degrees:
myView.transform = CGAffineTransformMakeRotation( 90 * M_PI / 180);
The key point to keep in mind with transformations is that they become animated effects when performed within an animation block. The transformations evolve over the duration of the animation and follow the specified animation curve in terms of timing.
Combining Transformations
Two transformations may be combined to create a single transformation effect via a call to the CGAffineTransformConcat function. This function takes as arguments the two transformation objects that are to be combined. The result may then be assigned to the transform property of the UIView object to be transformed. The following code fragment, for example, both scales and rotates a UIView object named myView:
CGAffineTransform scaleTrans =
CGAffineTransformMakeScale(2, 2);
CGAffineTransform rotateTrans =
CGAffineTransformMakeRotation(angle * M_PI / 180);
myView.transform = CGAffineTransformConcat(scaleTrans, rotateTrans);
Affine transformations offer an extremely powerful and flexible mechanism for creating animations and it is just not possible to do justice to these capabilities in a single chapter.
Learn SwiftUI and take your iOS Development to the Next Level
|
| Previous | Table of Contents | Next |
| An iOS 4 iPad Graphics Drawing Tutorial using Quartz 2D (Xcode 4) | An iOS 4 iPad Core Animation Tutorial (Xcode 4) |
