In this series of tutorials , we are going to study how can achieve various kinds of animations of UIView . Animations play a very important role in better looking applications and increases its quality . They make the apps look ... WOW !!!Also , animations can help make us various kinds of games .
In this tutorial , we are going to make a very simple animation of UIView . In the beginning there are no animating views . Then we click on the "Show" button , then four views originate from four corners of the iPhone screen and accumulate in the center of the screen and join together .
We have created four animating views as follows . To make views appears as if they are invisible before clicking the "show" button , the height and width of views are 0, 0.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) { animatingView1 = [[UIView alloc] init]; [animatingView1 setBackgroundColor:[UIColor redColor]]; animatingView1.frame = CGRectMake(0, 0, 50, 50); animatingView2 = [[UIView alloc] init]; [animatingView2 setBackgroundColor:[UIColor yellowColor]]; animatingView2.frame = CGRectMake(320, 0, 0, 0); animatingView3 = [[UIView alloc] init]; [animatingView3 setBackgroundColor:[UIColor greenColor]]; animatingView3.frame = CGRectMake(0, 480, 0, 0); animatingView4 = [[UIView alloc] init]; [animatingView4 setBackgroundColor:[UIColor blueColor]]; animatingView4.frame = CGRectMake(320, 480, 0, 0); [self.view setBackgroundColor:[UIColor lightGrayColor]]; } return self; }
In the following function we add the animating views to our viewcontroller's view and also create two button "show" and "hide" as follows .
- (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:animatingView1]; [self.view addSubview:animatingView2]; [self.view addSubview:animatingView3]; [self.view addSubview:animatingView4]; UIButton *nShowBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [nShowBtn setFrame:CGRectMake(20 , 50 , 100 , 50)]; [nShowBtn setTitle:@"show" forState:UIControlStateNormal]; [nShowBtn addTarget:self action:@selector(normalShowAnimation:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:nShowBtn]; UIButton *nHideBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [nHideBtn setFrame:CGRectMake(200 , 50 , 100 , 50)]; [nHideBtn setTitle:@"hide" forState:UIControlStateNormal]; [nHideBtn addTarget:self action:@selector(normalHideAnimation:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:nHideBtn]; }
Following are the selector function for touchUpInside event of two buttons. We used here a class method of UIView which take the duration of animation and a block where we can put the final state of our animation . In our animation , we are putting the final frame of our views with height and width of 50,50 and location at the centre of the screen . This makes views appear as if we they are originating from the four corners of the screen .
-(void)normalShowAnimation:(id)sender { [UIView animateWithDuration:0.6 animations:^(void){ animatingView1.frame = CGRectMake(110, 180, 50, 50); animatingView2.frame = CGRectMake(160, 180, 50, 50); } -(void)normalHideAnimation:(id)sender { [UIView animateWithDuration:0.6 animations:^(void){ animatingView1.frame = CGRectMake(0, 0, 0, 0); animatingView2.frame = CGRectMake(320, 0, 0, 0); }
Here are the final output of our animation .
