Animation plays a huge role in todays world. In many of IOS apps we have seen animated splash screen. In this post we will discuss about, how to add animated splash screen to our IOS app. An example of animated splash screen is shown below
Lets create an Xcode project and name it as AnimatedSplashTutorial. Add your splash screen animated images to your Xcode project. Here in this case we will use these five different images.You can download those assets from here
Download image assets
We will add our animated splash screen images to Xcode and or named from 1 to 5. Open Main .storyboard and set background color of view as maroon color so that we can judge the launch of app after animated splash disappeared.
Now open ViewController.m and in its viewDidLoad create an UIImageView object named as animatedSplashScreen and give it frame same of device screen size.
UIImageView *animatedSplashScreen = [[UIImageView alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
Add it as subview to the view.
[self.view addSubview:animatedSplashScreen];
Now its time for fun, as we are going to add animated splash screen. For this we will use, animationImages property of UIImageView. This property let us to add different images to UIImageView and then we will animate these images using startAnimating method of UIImageView. Then we will set animation repeat count, it has default value of 0 which means infinite animation, but we need to animate our images only once so we will specify repeatCount to 1. Then we will set animationDuration to 5 as we have five images and imageview will animate image 1 per second.
animatedSplashScreen.animationImages= [NSArray arrayWithObjects:[UIImage imageNamed:@”1.png”],[UIImage imageNamed:@”2.png”],[UIImage imageNamed:@”3.png”],[UIImage imageNamed:@”4.png”],[UIImage imageNamed:@”5.png”], nil];
animatedSplashScreen.animationRepeatCount=1;
animatedSplashScreen.animationDuration=5;
At this point we will all set to run our animated splash screen.For this we will use startAnimating method of UIImageView.
[animatedSplashScreen startAnimating];
Run the project and you will see animated splash screen. But one problem still persists, our view did not appear.
For this we will have to remove our animatedSplashScreen view that is added as subview to main view. To overcome from this issue we will perform a selector and pass animatedSplashScreen as object and set time to fire it 5 seconds same as our animation duration.
[self performSelector:@selector(hideSplash:) withObject:animatedSplashScreen afterDelay:5.0];
Definition of hideSplash will look like
-(void)hideSplash:(id)object
{
UIImageView *animatedImageview = (UIImageView *)object;
[animatedImageview removeFromSuperview];
}
Run your project now and you will see the desired output.
Video Output:
