UITabBarItem Icon Animation

Question

Skype app for iPhone uses animated TabBar icons. For example, during the logging-in the rightmost tab icon shows circulating arrows. While calling the "Call" tab icon softly blinks which is obviously done through animation.

I wonder how is it possible to animate tab bar items' icons.

In my particular case when the user presses the 'Favorite' button it jumps onto the 'Favorites' tab bar item. I have already implemented the jumping animation, but I would like the corresponding tab bar icon to blink at the end of animation to bring the feeling of completeness to it.

Any suggestions about the direction I should look in?

Thanks in advance.

Answer 1

I am surprised how easy the solution was!

Add method to your Application Delegate class .m-file (or any other class that manages your UITabBar) containing the following routine:

1. Create an UIImageView that will be used for animation.
2. Add it to your TabBar view using the addSubview: method.
3. Frame it down to the size of UITabBarItem (use UITabBar frame size and the number of tab bar items to calculate the frame size).
4. Adjust the imageView's frame.origin.x value to place the Image right above the tab bat item you want to animate.
5. Add animation you want to the imageView (you can play with opacity, swap several images - anything you want).

Pretty easy, don't you think so?

You can call this method on UIApplicationDelegate instance anywhere you need to animate the tab bar item.

Also it is important to notice that you can tap THROUGH the imageView to select the tab bar item as if there was no image over the tab bar. Many interesting conclusions can be done here on what you can do if you know it...