Core Animation 1 - Simple Animation by just changing frame size

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 .