www.it-ebooks.info www.it-ebooks.info Graphics and Animation on iOS www.it-ebooks.info www.it-ebooks.info Graphics and Animation on iOS Vandad Nahavandipoor Beijing • Cambridge • Farnham • Kưln • Sebastopol • Tokyo www.it-ebooks.info Graphics and Animation on iOS by Vandad Nahavandipoor Copyright © 2011 Vandad Nahavandipoor All rights reserved Printed in the United States of America Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (http://my.safaribooksonline.com) For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com Editor: Andy Oram Production Editor: Kristen Borg Proofreader: O’Reilly Production Services Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrator: Robert Romano Printing History: May 2011: First Edition Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc Graphics and Animation on iOS, the image of an Asian civet, and related trade dress are trademarks of O’Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein ISBN: 978-1-449-30567-3 [LSI] 1303483294 www.it-ebooks.info Table of Contents Preface vii Graphics and Animations Basic Concepts for Adapting to Different Screen Sizes Creating the Project Structure in Xcode Enumerating and Loading Fonts Drawing Text Constructing, Setting, and Using Colors Drawing Images Drawing Lines Constructing Paths Drawing Rectangles Adding Shadows to Shapes Creating and Drawing Gradients Displacing Shapes on Graphic Contexts Scaling Shapes Drawn on Graphic Contexts Rotating Shapes Drawn on Graphic Contexts Animating and Moving Views Animating and Scaling Views Animating and Rotating Views 10 12 13 18 20 27 31 34 40 48 51 54 54 65 66 v www.it-ebooks.info www.it-ebooks.info Preface Face it—animations make apps really attractive to users If your app presents a simple user interface, but only does what it says it does, chances are that users will choose a competitor’s app, one with a better user interface that makes use of iOS SDK’s fantastic animation and graphics capabilities This book is written to teach programmers how to incorporate smooth animations, along with skills such as loading custom fonts and drawing images in their apps Audience This book is written for programmers who are fairly new to Cocoa and iOS programming However, it is assumed that you know basic Objective-C and have done some Cocoa programming I also assume you know some elementary principles of computer graphics, such as coordinates and the RGB color scheme Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions Constant width Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords Constant width bold Shows commands or other text that should be typed literally by the user Constant width italic Shows text that should be replaced with user-supplied values or by values determined by context vii www.it-ebooks.info This icon signifies a tip, suggestion, or general note This icon indicates a warning or caution Using Code Examples This book is here to help you get your job done In general, you may use the code in this book in your programs and documentation You not need to contact us for permission unless you’re reproducing a significant portion of the code For example, writing a program that uses several chunks of code from this book does not require permission Selling or distributing a CD-ROM of examples from O’Reilly books does require permission Answering a question by citing this book and quoting example code does not require permission Incorporating a significant amount of example code from this book into your product’s documentation does require permission We appreciate, but not require, attribution An attribution usually includes the title, author, publisher, and ISBN For example: “Graphics and Animation on iOS by Vandad Nahavandipoor (O’Reilly) Copyright 2011 Vandad Nahavandipoor, 978-1-449-30567-3.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com Safari® Books Online Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly With a subscription, you can read any page and watch any video from our library online Read books on your cell phone and mobile devices Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features O’Reilly Media has uploaded this book to the Safari Books Online service To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com viii | Preface www.it-ebooks.info Rotating Shapes Drawn on Graphic Contexts I strongly suggest that you read the material in “Displacing Shapes on Graphic Contexts” on page 48 and in “Scaling Shapes Drawn on Graphic Contexts” on page 51 before proceeding with this section To avoid redundancy of material, I have tried to keep material that has been taught in earlier sections out of later sections Just like scaling and translation, you can apply rotation translation to shapes drawn on paths, and graphics contexts You can use the CGAffineTransformMakeRotation function and pass the rotation value in radians to get back a rotation transformation, of type CGAffineTransform You can then apply this transformation to paths and shapes If you want to rotate the whole context by a specific angle, you must use the CGContext RotateCTM procedure Let’s rotate the same rectangle we had in Figure 21, 45 degrees clockwise (see Figure 31) The values you supply for rotation must be in radians Positive values cause clockwise rotation, while negative values cause counterclockwise rotation: /* Rotate the rectangle 45 degrees clockwise */ CGAffineTransform transform = CGAffineTransformMakeRotation((45.0f * M_PI) / 180.0f); /* Add the rectangle to the path */ CGPathAddRect(path, &transform, rectangle); As we saw in “Scaling Shapes Drawn on Graphic Contexts” on page 51, we can also apply a transformation directly to a graphics context using the CGContext RotateCTM procedure Animating and Moving Views There are various ways of performing animations in iOS: capabilities are provided at a relatively low level, but also at a higher level The highest level we can get is through UIKit, which is what we will be discussing in this section UIKit includes some lowlevel Core Animation functionalities and presents us with a really clean API to work with The starting point for performing animations in UIKit is to call the beginAnimations: context: class method of the UIView class Its first parameter is an optional name that you choose for your animation, and the second is an optional context that you can retrieve later to pass to delegate methods of the animations We will talk about these shortly 54 | Graphics and Animations www.it-ebooks.info Figure 31 Rotating a rectangle After you start an animation with the beginAnimations:context: method, it won’t actually take place until you call the commitAnimations class method of UIView class The calculation you perform on a view object (such as moving it) between calling beginAni mations:context: and commitAnimations will be animated after the commitAnimations call Let’s have a look at an example As we saw in “Drawing Images” on page 18, I included in my bundle an image called Xcode.png This is Xcode’s icon, which I found by searching in Google Images (see Figure 14) Now, in my view controller (see “Creating the Project Structure in Xcode” on page 3), I want to place this image in an image view of type UIImageView and then move that image view from the top-left corner of the screen to the bottom-right corner Discussing image views and their different properties is out of this book’s scope For more information, please refer to the iOS Programming Cookbook (O’Reilly) Here are the steps that complete this task: Animating and Moving Views | 55 www.it-ebooks.info Open the h file of your view controller If you followed the instructions in “Creating the Project Structure in Xcode” on page 3, this file will be named GraphicsViewController.h in your project Define an instance of UIImageView as a property of the view controller, and call it xcodeImageView, like so: #import @interface GraphicsViewController : UIViewController { @protected UIImageView *xcodeImageView; } @property (nonatomic, retain) UIImageView *xcodeImageView; @end In the m file of your view controller, GraphicsViewController.m, synthesize the image view you created in the previous step and make sure you dispose of it when the time comes: #import "GraphicsViewController.h" @implementation GraphicsViewController @synthesize xcodeImageView; - (void)dealloc{ [super dealloc]; } - (void)viewDidUnload{ [super viewDidUnload]; self.xcodeImageView = nil; } @end Load the Xcode.png image into an instance of UIImage during the initialization of your view controller, like so: - (id) initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{ self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self != nil){ UIImage *xcodeImage = [UIImage imageNamed:@"Xcode.png"]; xcodeImageView = [[UIImageView alloc] initWithImage:xcodeImage]; 56 | Graphics and Animations www.it-ebooks.info /* Just set the size to make the image smaller */ [xcodeImageView setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; } return self; } When your view controller’s view is loaded, in the viewDidLoad instance method, add your image view to your view controller’s view in order for it to become visible to the user: - (void) viewDidLoad{ [super viewDidLoad]; UIImage *xcodeImage = [UIImage imageNamed:@"Xcode.png"]; xcodeImageView = [[UIImageView alloc] initWithImage:xcodeImage]; /* Just set the size to make the image smaller */ [xcodeImageView setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; self.view.backgroundColor = [UIColor whiteColor]; [self.view addSubview:self.xcodeImageView]; } Figure 32 shows how our view will look when we run our program in iOS Simulator Now when our view appears on the screen, in the viewDidAppear: instance method of our view controller, we will start the animation block for our image view and start an animation that moves the image from its initial location at the top-left corner of the screen to the bottom-right corner We will make sure this animation happens over a 5-second time period: - (void) viewDidAppear:(BOOL)paramAnimated{ [super viewDidAppear:paramAnimated]; /* Start from top left corner */ [self.xcodeImageView setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; [UIView beginAnimations:@"xcodeImageViewAnimation" context:xcodeImageView]; Animating and Moving Views | 57 www.it-ebooks.info Figure 32 Adding an image view to a view object /* seconds animation */ [UIView setAnimationDuration:5.0f]; /* Receive animation delegates */ [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector: @selector(imageViewDidStop:finished:context:)]; /* End at the bottom right corner */ [self.xcodeImageView setFrame:CGRectMake(200.0f, 350.0f, 100.0f, 100.0f)]; [UIView commitAnimations]; } Provide the implementation for a imageViewDidStop:finished:context: delegate method for your view controller so that it gets called by UIKit when the animation finishes This is optional, and for our example I will just log some messages to prove that the method was called Later examples will show how you can use the method to kick off other activity the moment the animation is finished: 58 | Graphics and Animations www.it-ebooks.info - (void)imageViewDidStop:(NSString *)paramAnimationID finished:(NSNumber *)paramFinished context:(void *)paramContext{ NSLog(@"Animation finished."); NSLog(@"Animation ID = %@", paramAnimationID); UIImageView *contextImageView = (UIImageView *)paramContext; NSLog(@"Image View = %@", contextImageView); } Now if you run the app, you will notice that as soon as your view gets displayed, the image shown in Figure 32 will start moving towards the bottom-right corner, as shown in Figure 33, over a period of seconds Figure 33 The image is animated to the bottom-right corner of the screen Also, if you look at the output printed to the console, you will see something similar to this if you wait for the animation to finish: Animation finished Animation ID = xcodeImageViewAnimation Image View = Animating and Moving Views | 59 www.it-ebooks.info Now let’s go through some of the concepts and how we actually animated this image view Here are the important class methods of UIView that you should know about when performing animations using UIKit: beginAnimations:context: Starts an animation block Any animatable property change that you apply to views after calling this class method will be animated after the animation is committed setAnimationDuration: Sets the duration of the animation in seconds setAnimationDelegate: Sets the object that will receive delegate objects for various events that could happen before, during, or after the animation Setting a delegate object will not immediately start firing animation delegates You must also use different setter class methods on the view object to tell UIKit which selectors in your delegate object have to receive which delegate messages setAnimationDidStopSelector: Sets the method in the delegate object that has to be called when the animation finishes This method has to accept three parameters in this order: An animation identifier of type NSString: this will contain the animation identifier passed to the beginAnimations:context: class method of UIView when the animation was started A “finished” indicator, of type NSNumber: this parameter contains a boolean value inside the NSNumber, which the run-time sets to YES if it could fully finish the animation before it was stopped by the code If this is value is set to NO, it means the animation was interrupted before it was completed A context of type void *: this is the context that was passed to the beginAni mations:context: class method of UIView when the animation was started setAnimationWillStartSelector: Sets the selector that has to be called in the delegate object when the animation is about to start The selector passed to this class method has to have two parameters, in this order: An animation identifier of type NSString: the runtime sets this to the animation identifier passed to the beginAnimations:context: class method of UIView when the animation was started A context of type void *: this is the context that was passed to the beginAni mations:context: class method of UIView when the animation was started setAnimationDelay: Sets a delay (in seconds) for the animation before it starts If this value is set to 3.0f, for instance, the animation will start seconds after it has been committed setAnimationRepeatCount: Sets the number of times an animation block has to repeat its animation 60 | Graphics and Animations www.it-ebooks.info Now that we know some of the most useful UIView class methods that help us animate views, let’s look at another animation In this example code, I want to have two image views, both displaying the same image, to appear on the screen at the same time: one at the top-left corner and the other at the bottom-right corner, as shown in Figure 34 Figure 34 The starting position of the animation In this section, I will call the top-left image image and the bottom-right image image What we are going to in this code is create two images, as mentioned, in the topleft and bottom-right corners Next, we want image to start moving towards image over a 3-second period, and then fade away While image is approaching image 2, we want image to start its animation and move towards the top-left corner of the screen, where image used to be We also want image to complete its animation over a 3-second time period, and fade away at the end This will look really cool when you run it on a device or the iOS Simulator Let me show you how to code it: Animating and Moving Views | 61 www.it-ebooks.info In the h file of your view controller, define two image views: @interface GraphicsViewController : UIViewController { @protected UIImageView *xcodeImageView1; UIImageView *xcodeImageView2; } @property (nonatomic, retain) UIImageView *xcodeImageView1; @property (nonatomic, retain) UIImageView *xcodeImageView2; @end In the m file of the view controller, make sure that you synthesize these two image views, because they are properties Properties are explained thoroughly in the iOS Programming Cookbook (O’Reilly): #import "GraphicsViewController.h" @implementation GraphicsViewController @synthesize xcodeImageView1; @synthesize xcodeImageView2; rest of the code Make sure you deallocate both image views when the view is unloaded or deallocated: - (void)dealloc{ [xcodeImageView1 release]; [xcodeImageView2 release]; [super dealloc]; } - (void)viewDidUnload{ [super viewDidUnload]; self.xcodeImageView1 = nil; self.xcodeImageView2 = nil; } In the viewDidLoad instance method of your view controller, initialize both of the image views and place them on your view: - (void) viewDidLoad{ [super viewDidLoad]; UIImage *xcodeImage = [UIImage imageNamed:@"Xcode.png"]; xcodeImageView1 = [[UIImageView alloc] initWithImage:xcodeImage]; xcodeImageView2 = [[UIImageView alloc] initWithImage:xcodeImage]; 62 | Graphics and Animations www.it-ebooks.info /* Just set the size to make the images smaller */ [xcodeImageView1 setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; [xcodeImageView2 setFrame:CGRectMake(220.0f, 350.0f, 100.0f, 100.0f)]; self.view.backgroundColor = [UIColor whiteColor]; [self.view addSubview:self.xcodeImageView1]; [self.view addSubview:self.xcodeImageView2]; } Implement an instance method called startTopLeftImageViewAnimation for your view controller This method, as its name suggests, will carry out the animation for image 1, moving it from the top-left corner of the screen to the bottom-right corner while fading it out Fading is accomplished simply by setting the alpha value to 0: - (void) startTopLeftImageViewAnimation{ /* Start from top left corner */ [self.xcodeImageView1 setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; [self.xcodeImageView1 setAlpha:1.0f]; [UIView beginAnimations:@"xcodeImageView1Animation" context:xcodeImageView1]; /* seconds animation */ [UIView setAnimationDuration:3.0f]; /* Receive animation delegates */ [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector: @selector(imageViewDidStop:finished:context:)]; /* End at the bottom right corner */ [self.xcodeImageView1 setFrame:CGRectMake(220.0f, 350.0f, 100.0f, 100.0f)]; [self.xcodeImageView1 setAlpha:0.0f]; [UIView commitAnimations]; Animating and Moving Views | 63 www.it-ebooks.info } When the animation for any of these image views stops, we intend to remove those image views from their parent views, as they are not useful anymore As we saw in the startTopLeftImageViewAnimation method, we passed a delegate selector to the setAnimationDidStopSelector: class method of UIView, and this selector will get called when the animations for image (as we saw before) and for image (as we will soon see) stop Here is the implementation for this delegate selector: - (void)imageViewDidStop:(NSString *)paramAnimationID finished:(NSNumber *)paramFinished context:(void *)paramContext{ UIImageView *contextImageView = (UIImageView *)paramContext; [contextImageView removeFromSuperview]; } We also need a method that will animate image There is a little difference between how I’ve written the animation method for image as compared to that for image I want to be able to start image ’s animation almost as image is finishing its animation So if image performs its animation in seconds, I want image to start its animation at second 2.0 in image 1’s animation, so that I can see image starting to animate before image gets to the bottom right of the screen and fades away To accomplish this, I am starting both animations at the same time, but the animation for image will include a 2-second delay at the beginning So if I start both animations at p.m., image will start its animation at 13:00:00 and finish it at 13:00:03, while image starts at 13:00:02 and finishes at 13:00:05 Here is how we will animate image 2: - (void) startBottomRightViewAnimationAfterDelay: (CGFloat)paramDelay{ /* Start from bottom right corner */ [self.xcodeImageView2 setFrame:CGRectMake(220.0f, 350.0f, 100.0f, 100.0f)]; [self.xcodeImageView2 setAlpha:1.0f]; [UIView beginAnimations:@"xcodeImageView2Animation" context:xcodeImageView2]; /* seconds animation */ [UIView setAnimationDuration:3.0f]; [UIView setAnimationDelay:paramDelay]; /* Receive animation delegates */ [UIView setAnimationDelegate:self]; 64 | Graphics and Animations www.it-ebooks.info [UIView setAnimationDidStopSelector: @selector(imageViewDidStop:finished:context:)]; /* End at the top left corner */ [self.xcodeImageView2 setFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; [self.xcodeImageView2 setAlpha:0.0f]; [UIView commitAnimations]; } Last but not least, we have to fire both the startTopLeftImageViewAnimation and the startBottomRightViewAnimationAfterDelay: methods at the same time when our view becomes visible: - (void) viewDidAppear:(BOOL)paramAnimated{ [super viewDidAppear:paramAnimated]; [self startTopLeftImageViewAnimation]; [self startBottomRightViewAnimationAfterDelay:2.0f]; } Animating and Scaling Views I highly recommend that you read “Animating and Moving Views” on page 54 before proceeding with this section of the book In order to scale a view while animating it, you can either apply a scale transformation to it within an animation block (see “Scaling Shapes Drawn on Graphic Contexts” on page 51), or just increase the view’s width and/or height Let’s have a look at scaling an image view by applying a scale transformation to it: - (void) viewDidAppear:(BOOL)paramAnimated{ [super viewDidAppear:paramAnimated]; /* Place the image view at the center of the view of this view controller */ self.xcodeImageView.center = self.view.center; /* Make sure no translation is applied to this image view */ self.xcodeImageView.transform = CGAffineTransformIdentity; Animating and Scaling Views | 65 www.it-ebooks.info /* Begin the animation */ [UIView beginAnimations:nil context:NULL]; /* Make the animation seconds long */ [UIView setAnimationDuration:5.0f]; /* Make the image view twice as large in width and height */ self.xcodeImageView.transform = CGAffineTransformMakeScale(2.0f, 2.0f); /* Commit the animation */ [UIView commitAnimations]; } This code uses an affine scale transformation to scale the image view to become twice as big as it originally was The best thing about applying scale transformations to a view is that the width and height are scaled using the center of the view as the center of the scaling Suppose that the center of your view is at point (100, 100) on the screen, and you scale your view to be twice as big in width and height The resulting view will have its center remain at point (100, 100) on the screen, while being twice as big in each direction If you were to scale a view by increasing its frame’s width and height explicitly, you would end up with the final view being located somewhere else on the screen That’s because when changing the frame of the image view to scale the width and height, you are also changing the value of the x and the y of the frame, whether you want to or not Because of that, your image view will not be scaled up from its center Fixing this issue is outside the scope of this book, but feel free to play with it for a while and maybe you will find the solution One hint that I will give you is that you can run two animations at the same time in parallel: one for changing the width and height, and the other for changing the center of the image view! Animating and Rotating Views I highly recommend that you read “Animating and Moving Views” on page 54 before proceeding with this section of the book In order to rotate a view while animating it, you must apply a rotation transformation to it while in an animation block (see “Scaling Shapes Drawn on Graphic Contexts” on page 51) Let’s have a look at some sample code which will make this clearer Let’s say we have an image named Xcode.png (see Figure 14), and we want to display it in the center of the screen After the image is displayed, we want to rotate it 90 degrees 66 | Graphics and Animations www.it-ebooks.info over a 5-second time period and then rotate it back to its original orientation So when our view appears on the screen, let’s rotate the image view 90 degrees clockwise: - (void) viewDidAppear:(BOOL)paramAnimated{ [super viewDidAppear:paramAnimated]; self.xcodeImageView.center = self.view.center; /* Begin the animation */ [UIView beginAnimations:@"clockwiseAnimation" context:NULL]; /* Make the animation seconds long */ [UIView setAnimationDuration:5.0f]; [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector: @selector(clockwiseRotationStopped:finished:context:)]; /* Rotate the image view 90 degrees */ self.xcodeImageView.transform = CGAffineTransformMakeRotation((90.0f * M_PI) / 180.0f); /* Commit the animation */ [UIView commitAnimations]; } We’ve chosen the clockwiseRotationStopped:finished:context: selector to get called when the clockwise rotation animation finishes In that method, we will be rotating the image view counterclockwise back to degrees (where it originally was) over a 5-second time period: - (void)clockwiseRotationStopped:(NSString *)paramAnimationID finished:(NSNumber *)paramFinished context:(void *)paramContext{ [UIView beginAnimations:@"counterclockwiseAnimation" context:NULL]; /* seconds long */ [UIView setAnimationDuration:5.0f]; /* Back to original rotation */ self.xcodeImageView.transform = CGAffineTransformIdentity; [UIView commitAnimations]; } Animating and Rotating Views | 67 www.it-ebooks.info As you saw in “Animating and Moving Views” on page 54, “Animating and Scaling Views” on page 65, and in this section, there are many ways to animate views (direct or indirect subclasses of UIView) and many properties that you can modify while carrying out your animations Be creative and inspect other properties in UIView which you might have not previously known about You may also want to take a look at the documentation for UIView in Xcode Organizer 68 | Graphics and Animations www.it-ebooks.info ...www.it-ebooks.info Graphics and Animation on iOS www.it-ebooks.info www.it-ebooks.info Graphics and Animation on iOS Vandad Nahavandipoor Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo www.it-ebooks.info... SDK’s fantastic animation and graphics capabilities This book is written to teach programmers how to incorporate smooth animations, along with skills such as loading custom fonts and drawing images... www.it-ebooks.info Core Graphics A framework that supports the graphics context (more on this later), loading images, drawing images, and so on Core Animation A framework that, as its name implies, facilitates