When developing an app, animations can make the defierence between a good user experience and a great one. Like most things in programing there are serveral ways to animate ui components, but I will be using the UIView class with block-based animation methods. This works with iOS 4 and greater.

UIView animateWithDuration: and block-based animation methods

There are 3 main methods that I use but there are a couple others:

[UIView animateWithDuration:0.2
                 animations:^{
       // animations go here
}];


[UIView animateWithDuration:0.2
                 animations:^{
                     // animations go here
                 }
                completion:^(BOOL finished) {
                    // block fires when animation has finished
}];


[UIView animateKeyframesWithDuration:0.2
                               delay:0.0
                             options:UIViewKeyframeAnimationOptionCalculationModeLinear
                          animations:^{
                              // animations go here
                          }
                          completion:^(BOOL finished) {
                              // block fires when animaiton has finished
}];

You can take a look at the UIView Class Reference for all the animation methods as well as other techniques for animation.

Lets animate something!

Now that we know what methods to use lets try and animate something. In this example we are animate two views to the left and then back to their original position. There will be 2 buttons to allow you to set the animation options (to view all the available options take a look at the UIView Class Reference), and allow you to see the difference between the two. You can also grab the project on github and follow along.

Setting up the storyboard and .h file

To start we are going to set up the view in the storyboard by creating the IBOutlets and hooking them up in interface builder.

//
//  ViewController.h
//  objectiveCAnimation
//
//  Created by Barrett Breshears on 6/29/14.
//  Copyright (c) 2014 Barrett Breshears. All rights reserved.
//

#import 

@interface ViewController : UIViewController

@property (nonatomic, strong) IBOutlet UIButton *animationOption1;
@property (nonatomic, strong) IBOutlet UIButton *animationOption2;
@property (nonatomic, strong) IBOutlet UIButton *animateBtn;
@property (nonatomic, strong) IBOutlet UIButton *pickerSelectBtn;


@property (nonatomic, strong) IBOutlet UIView *view1;
@property (nonatomic, strong) IBOutlet UIView *view2;

@property (nonatomic, strong) IBOutlet UIPickerView *animationPicker;

@property (nonatomic, assign) UIViewAnimationOptions animation1;
@property (nonatomic, assign) UIViewAnimationOptions animation2;

@property (nonatomic, strong) NSArray *animationNames;

@property (nonatomic, assign) BOOL animationInProgress;

-(IBAction)selectAnimation1:(id)sender;
-(IBAction)selectAnimation2:(id)sender;
-(IBAction)animateViews:(id)sender;

@end

Animating the views

Animating the views will be super easy. We will be animating the views frame, but you can change this to anything you want (like scale: _view1.transform = CGAffineTransformMakeScale(1.0, 1.0); ), and you can have as many animations as you want in there. Also you will notice that we have a nested animation inside the completion block that animates the view back to the original position.

  // animation 1
    [UIView animateKeyframesWithDuration:0.5
                                   delay:0.0
                                 options:_animation1
                              animations:^{
                                _view1.frame = CGRectMake(_view1.frame.origin.x + 200, _view1.frame.origin.y, _view1.frame.size.width, _view1.frame.size.height);
                              }
                              completion:^(BOOL finished) {
                                  [UIView animateKeyframesWithDuration:0.5
                                                                 delay:0.0
                                                               options:_animation1
                                                            animations:^{
                                                                _view1.frame = CGRectMake(_view1.frame.origin.x - 200, _view1.frame.origin.y, _view1.frame.size.width, _view1.frame.size.height);
                                                            }
                                                            completion:^(BOOL finished) {
                                                                _animationInProgress = NO;
                                                            }];
                              }];
    // animation 2
    [UIView animateKeyframesWithDuration:0.5
                                   delay:0.0
                                 options:_animation2
                              animations:^{
                                  _view2.frame = CGRectMake(_view2.frame.origin.x + 200, _view2.frame.origin.y, _view2.frame.size.width, _view2.frame.size.height);
                              }
                              completion:^(BOOL finished) {
                                  [UIView animateKeyframesWithDuration:0.5
                                                                 delay:0.0
                                                               options:_animation2
                                                            animations:^{
                                                                _view2.frame = CGRectMake(_view2.frame.origin.x - 200, _view2.frame.origin.y, _view2.frame.size.width, _view2.frame.size.height);
                                                            }
                                                            completion:^(BOOL finished) {
                                                                _animationInProgress = NO;
                                                            }];
                              }];

This is a very basic example but it shows how easy adding animation to your views are. If you have any questions please let me know in the comment or sent me messages on twitter @barrettbreshears. Also if this post helped you out I would appreciate if you share with your friends on twitter! Thanks for reading!