$aleOrigin

Please consider subscribing to Mobile Developer Tips
RSS feed or following us on Twitter


Animated Gif – Animated Images – iPhone Style

Posted on July 16, 2009 by in Graphics


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 (aka frame) 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 the animationImages 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.

At this point we are pretty much good to go, all we need to do is add the UIImageView object as a subview (line 44) and start the animation (line 48).

Application in the iPhone Simulator
The movie below shows how the application looks when running in the iPhone simulator:

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.

  Animated gif of Newtons cradle, courtesy: Wikipedia  


Related posts:

  1. Images and Caching

Comments

21 Responses to “Animated Gif – Animated Images – iPhone Style”

Leave Comment

(required)

(required)


All Content Copyright © 2008-2012 • Mobile Developer Tips, All Rights Reserved.
iPhone and iPad are registered trademarks of Apple, Inc.
iOS is a registered trademark of Cisco Technology, Inc.