in iOS, tutorial

Using UIImageView for animate a sequence of images

As many of you may know, I am in the middle of program my own iOS app! I haven’t talked too much about it yet because I know I still have a long long way to go. Don’t worry, you will hear about it pretty soon (hopefully).

This weekend I have had an unusual request for myself. I wanted to make a cool, simple, minimal, good-looking animation for making disappear an object from the screen. After some frustrating minutes looking around Google Images, I suddenly had an inspiration:

Poof GIF

Do you recognize that? If not, try to drag out an app from the dock in your lovely mac and there you have it. Yes, I am going to use a similar animation in my app.

If someone else is interested in the original png file, you can find it here: File /System/Library/CoreServices/Dock.app/Contents/Resources/poof.png It is a spritesheet containing 5 images.

Poof.png

Once we have our png files (I have separated them), UIImageView gives us the possibility of animate the sequence really easy. Here is the code I have used:

I would like to add some notes to this code:

  • I have initialized the explosion property using -initWithFrame: method. This is because, once the animation is finished, I don’t want to see the image any more in the screen. In case you’d prefer to keep the first image in the screen, you should use -initWithImage: and pass it your first image. After doing that, remember to set the frame property.
  • This is a really easy way for animating a sequence of images, but keep in mind it is not as powerful as Core Animation or UIView animation. For example, it does not implement a delegate to let us know when the animation has been finished. In case you need that, I guess you should observe the ‘isAnimating’ property.
  • You can also call -stopAnimating. I haven’t tried it yet, so I am not sure if it “freezes” the animation in the current frame, or just come back to the first frame.

One more step: Use it as a custom Activity indicator

Do you guys know about MBProgressHUD? I am sure you do, but in case you have no idea what I am talking about, please take some time to visit the project in Github (you will thank me, I promise). Now that we are all in the same page, from my point of view, one of the best things we can do with this image sequence animations is create a custom activity indicator without any pain. Once we have set our UIImageView like I have just explained, we can use MBProgressHUD like that:

CAUTION – Guys, remember to delete the line of code that sets the animationRepeatCount property to 1! For this case, we want a nice loop.

I think this is all I have to say. I am learning more than ever while I am doing my app, so I am sure I will come back with more and better!

If you have enjoyed it, don’t forget to share! And if you haven’t, don’t forget to let me know why :D

Leave a Reply