How to Animate a Series of Images "In Place" in Your iOS App - dummies

How to Animate a Series of Images “In Place” in Your iOS App

By Jesse Feiler

Here, you will find a way to animate a series of images “in place” in your iOS app— you are not moving the image around; instead you are changing the image where it is to make it appear as if it were animated.

To make the Test Drive button blink, for example, add the bolded code below. As you can see, only a single line of code is needed to animate the button.

- (void)viewDidLoad
 [super viewDidLoad];
 NSURL* backgroundURL = [NSURL fileURLWithPath:[[NSBundle mainBundle]pathForResource:@"CarRunning" 
ofType:@"aif"]]; backgroundAudioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:backgroundURL error:nil]; backgroundAudioPlayer.numberOfLoops = -1; [backgroundAudioPlayer prepareToPlay]; NSURL* burnRubberURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"BurnRubber"
ofType:@"aif"]]; AudioServicesCreateSystemSoundID((__bridge CFURLRef)burnRubberURL, &burnRubberSoundID); [self.testDriveButton setBackgroundImage:[UIImage animatedImageNamed:@"Button"
duration:1.0 ] forState:UIControlStateNormal]; }

This blinking button is designed to show you how to animate changing images. Blinking objects on the screen are generally avoided in good interfaces. Remember the famous saying, “Less is more.”

Normally, you might think of making the background image a single image. However, animatedImageNamed:duration: and some similar methods use instead a series of files, each displayed for a duration you specify. This type of method enables you to animate (this time, in place) not only a button but also any image by simply supplying a series of images:

 [testDriveButton setBackgroundImage:
 [UIImage animatedImageNamed:@"Button" duration:1.0]

In the animatedImageNamed: method, you supply a base name of an image to animate. The method appends a 0 to the base name and loads that image (in this case, Button0).

After the time that you specify in duration has elapsed, the animatedImageNamed: method appends the next number (in this case, 1) to the base image name and attempts to load it and the remainder of images (up to 1,024 images) until it runs out of images, and then it starts over.

In the Project navigator, open the disclosure triangle for the Resources group. If you look in the RoadTrip Resources group, you see two images, Button0 and Button1 — with Button being the base name you specified. This is an “in place” animation, so all images included in the animated image should share the same size and scale.

If you select each image in the Project navigator, you can see that they’re slightly different colors, and each will display for 1.0 second (duration:1.0). This makes the button blink and certainly adds some life to the Main view.