Animated Images in iPhone

Animated Gif - Animated Images - iPhone Style

Ah, the animated gif, a throwback to the early days of web development and simple animation. In this post I’ll show you how to use a UIImageView to create a similar effect that you get with an animated gif.

Below I’ve inserted the animated gif that I’ll use as a template for the iPhone app we’ll write in this post.

                                            

Animated gifs are nothing more than a series of images, encapsulated within one gif file, that are displayed in sequence. Within an animated gif one can specify the duration that each image  is displayed, which offers a wide range effects that you can achieve.

Animated Images on the iPhone
To achieve a similar effect in an iPhone app, we create a UIImageView and set theanimationImages property to point to an array of images. Not unlike the animated gif, we now have a series of images in which we can control the amount of time to complete one cycle of the images, as well as the repeat count of how many times to cycle through the animation.

To keep the example short, I’ll use only one class, the application delegate. Here is how I’ve defined the delegate class:

@interface animationAppDelegate : NSObject <UIApplicationDelegate>
{
  UIImageView   *animatedImages;
  NSMutableArray *imageArray;
  UIWindow *window;
}

Not much here, the UIImageView, an array to hold the images and the UIWindow for the output.

The code for the implementation of the app delegate follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

#import "animationAppDelegate.h"   #define IMAGE_COUNT 36 #define IMAGE_WIDTH 240 #define IMAGE_HEIGHT 180 #define STATUS_BAR_HEIGHT 20 #define SCREEN_HEIGHT 460 #define SCREEN_WIDTH 320   @implementation animationAppDelegate   @synthesize window;   - (void)stopAnimation { [animatedImages stopAnimating]; }   - (void)applicationDidFinishLaunching:(UIApplication *)application { window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];   // Array to hold jpg images imageArray = [[NSMutableArray alloc] initWithCapacity:IMAGE_COUNT];   // Build array of images, cycling through image names for (int i = 0; i < IMAGE_COUNT; i++) [imageArray addObject:[UIImage imageNamed: [NSString stringWithFormat:@"Frame_%d.jpg", i]]];   // Animated images - centered on screen animatedImages = [[UIImageView alloc] initWithFrame:CGRectMake( (SCREEN_WIDTH / 2) - (IMAGE_WIDTH / 2), (SCREEN_HEIGHT / 2) - (IMAGE_HEIGHT / 2) + STATUS_BAR_HEIGHT, IMAGE_WIDTH, IMAGE_HEIGHT)]; animatedImages.animationImages = [NSArray arrayWithArray:imageArray];   // One cycle through all the images takes 1 seconds animatedImages.animationDuration = 1.0;   // Repeat forever animatedImages.animationRepeatCount = 0;   // Add subview and make window visible [window addSubview:animatedImages]; [window makeKeyAndVisible];   // Start it up animatedImages.startAnimating;   // Wait 5 seconds, then stop animation [self performSelector:@selector(stopAnimation) withObject:nil afterDelay:5];   }   - (void)dealloc { [imageArray release]; [animatedImages release]; [window release]; [super dealloc]; }   @end

How it Works
On lines 3 – 5 we define the attributes for the images in the animation. There are a total of 36 images, each is 240 x 180 pixels. On line 22 the array is defined which will hold the images and lines 25 – 27 the images are added to the array. You can decipher from the code that the images I am using have file names in the format: Frame_1.jpg, Frame_2.jpg, Frame_3.jpg, etc.

On lines 30 – 34 we allocate an UIImageView object and configure the frame so the image is centered on the device display. Line 35 sets the animationImages property to the array of images created above.

Line 38 sets the duration for one cycle through all the images. We specify the images are to cycle indefinitely by setting the animationRepeatCount to -1 on line 41.

                                

Porting Animated Gif to iPhone
Not unlike I did for the example above, if you have an animated gif that you would like to use within an iPhone app, it’s as simple as extracting/saving each image inside a gif and using a sequential naming convention. I opened the original gif file and manually saved each frame in the image to a jpg file. There are a number of tools that will do the extraction/saving/renaming for you (search for gif extractor).

With all the images saved as separate file, swap the image attributes in the #define section and update the code on line 27 to match the filename you used for saving each file.

Xcode Project Source Code
Download the Animation Xcode project.