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:
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
- (UIImageView *) explosion{ //Position the explosion image view somewhere in the middle of your current view. In my case, I want it to take the whole view.Try to make the png to mach the view size, don't stretch it _explosion = [[UIImageView alloc] initWithFrame:self.bounds]; //Add images which will be used for the animation using an array. Here I have created an array on the fly _explosion.animationImages = @[[UIImage imageNamed:@"poof_01.png"], [UIImage imageNamed:@"poof_02.png"],[UIImage imageNamed:@"poof_03.png"], [UIImage imageNamed:@"poof_04.png"],[UIImage imageNamed:@"poof_05.png"]]; //Set the duration of the entire animation _explosion.animationDuration = 0.5; //Set the repeat count. If you don't set that value, by default will be a loop (infinite) _explosion.animationRepeatCount = 1; //Start the animationrepeatcount [_explosion startAnimating]; return _explosion; } //Call this method for start explosion animation - (void) attachExplosionAnimation { [self addSubview:self.explosion]; } |
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:
|
1 2 3 |
MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES]; hud.mode = MBProgressHUDModeCustomView; hud.customView = self.explosion; |
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
Nice tutorial, simple and elegant well done!
Thanks mate for leaving a comment! A pleasure :D
Sweet! Nice post!
Glad you like it.
Thanks!
ole tu!
You are running so fast…
I’ll need an intensive period to reach your freak skills !!!