Adding animation images to your iOS App in less than 5 minutes.


Here is a cool animation trick you can use for your iOS app.

This week, our class at The Flatiron School learned about animations and gestures. There are a ton of nifty things you can do with Xcode, but a simple way to animate still objects in Objective-C is through UIImageView’s property, animation images. You can think of them as GIFs.

I’ve never used photoshop but a powerful alternative I have that fulfills just about all my need for a web and mobile app developer is Sketch.

Sketch can make full fidelity app prototypes for web and mobile apps, but you can use Sketch for simple tasks like cropping, transforming images. On top of that, you can export whatever you create and edit in just about any image format.

In this case, we want to have a transparent background so we’ll export our images into PNG files. For images that you plan to animate as an icon or bar button item is Xcode, I noticed that all you need are five slightly varying images to simulate smooth motion. In this demo image, I’m going to animate my music sound wave and pen such that the sound wave image appears to continuously outline, which is provided by the ‘ink’, if you will, of my oscillating pen image.

Step 1.

Create an Array of Image Names

NSArray *imageNames = @[@”icon1", @”icon2", @”icon3", @”icon4", @”icon5"];

Step 2.

Create a mutable array to add the UI Images to it with a for loop.

NSMutableArray *images = [[NSMutableArray alloc] init];
for (int i = 0; i < imageNames.count; i++) { 
[images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
}

Step 3.

Set the UIImageView property called ‘animationImages’ to you images array.

The property animationImage accepts an array of UI Images.

UIImageView *iconImage = [UIImageView alloc] init];
self.iconImage.animationImages = images;

Step 4.

Set the animation duration.

self.iconImage.animationDuration = 1.2;

Step 5

Start the animation!

[self.iconImage startAnimating];

That’s it!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.