Thursday, 7 June 2012

iOS - Creating animation based on several images

Within the framework of iOS, it allows the coders to create an animation based on several images. To do it, no special view are required. Solely UIImageView is needed.

1. Creating the view
1.1 Open the story board file
1.2 Drop a UIImage view (Image View) from the Object Library to your story board

2. Make the connections
2.1 From the storyboard, open the Assistant View, which shows two screens at the same time. By default, on the right upper corner of the second screen, it should show the Automatic Mode, which shows a ViewController.h file. If it does show it, click on the right upper corner of the second windows and select Automatic.
2.2 From the Story board screen, click on the Image view. While you holds the "Ctrl" button, drag the Image View into the .h file. It will shows you line that comes from the Image view. Drop it between @Interface and @end It will shows you a pop-up windows
2.3 Make sure that the type of connection is "Outlet". Type any name of the image. For example, "imageView".

3. Copy the resources
3.1 Select the images and drag them into the Xcode project folder. It will show a green plus (+) symbol
3.2 When the option screen appears, mark the checkbox on the left of "Copy items into destination group's folder (if needed)". This will tells to the XCode to have a copy of the images inside of the XCode project. Thus, your project will be more independent.
3.3 Creates a special group (folder) for it/them if necessary.

4. Assign the image sources
4.1 Open the implementation file (.m) of the view controller
4.2 Under the method "viewDidLoad" type the follow code:

NSArray *animationImages = [[NSArray alloc] initWithObjects:
    [UIImage imageNamed:@"YOURIMAGENAME1.EXTENSION"],

    [UIImage imageNamed:@"YOURIMAGENAME2.EXTENSION"],
    [UIImage imageNamed:@"YOURIMAGENAMEn.EXTENSION"],    

[self.imageView startAnimating];

To stop it, you just has to send a message to stopAnimation.

[self.imageView stopAnimation];

5. Other methods
5.1 Duration (frames)
Optionally you can set the speed of the animation. This is the number of seconds it taks for a single cycle of the animation to be played. By default, it plays 30 frames (images) per second.


5.2 The actual state
The another good method to take account is the method which check the actual state of the animation.

[self.imageView isAnimating]

Which returns True if it is animating and False otherwise.


  1. Thank you again for all the knowledge you distribute,Good post. I was very interested in the article, it's quite inspiring I should admit. I like visiting you site since I always come across interesting articles like this one.Great Job, I greatly appreciate that.Do Keep sharing! Regards,