jump to navigation

View Animation Tutorial August 17, 2009

Posted by Ameya in iPhone, iPhone App Devlopment.

Lets start by taking a simple view based application.

Open the view controller class file of the application and you will find an commented method ” -(void)viewDidLoad” copy past the following line of code in the scope of the method.

[super viewDidLoad];

/* Simple Viewable red rectrangle */

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100,100,100,50)];

view.backgroundColor = [UIColor redColor];

[self.view addSubview:view];

/* Create simple animation */

//Create context for animation

NSValue *contextPoint = [[NSValue valueWithCGPoint:view.center] retain];

[UIView beginAnimations:nil context:contextPoint];

//Animation duration in float

[UIView setAnimationDuration:5];

//Animation process curve

[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

//Animation repeate

[UIView setAnimationRepeatCount:1];

//Animation start after delay

[UIView setAnimationDelay:1];

//Apply transformations in combination to the view

view.transform =  CGAffineTransformConcat(






[UIView commitAnimations];

  • The above comments for the pice of code are self explanatory.
  • Lines 5 to 7 help to create simple res rectangle and adds as a sub-view of the current view.
  • Now for animation we have to create an canvas which is called our context. The context is created with the line 11 and 12.
  • Now we have to tell what the animation should be like.
  • Line 5 states that the entire animation will be completed in 5 seconds. The input is fraction hence takes in 5.5 etc also.
  • Line 18 states the animation curve, that is what speed the animation should proceed. The variant of the values are.

An ease-in ease-out curve causes the animation begins slowly, accelerate through the middle of its
duration, and then slow again before completing.
Available in iPhone OS 2.0 and later.
Declared in UIView.h.
An ease-in curve causes the animation to begin slowly, and then speed up as it progresses.
Available in iPhone OS 2.0 and later.
Declared in UIView.h.
An ease-out curve causes the animation to begin quickly, and then slow as it completes.
Available in iPhone OS 2.0 and later.
Declared in UIView.h.
A linear animation curve causes an animation to occur evenly over its duration.
Available in iPhone OS 2.0 and later.
Declared in UIView.h.

  • Line 21 states how many repetation of the animation are required. Takes fraction input but not 0 to denote infinite loops, but we have to specify the number of loop. try changing the value to 1.5 in your application. The animation will run once full then a half.
  • Line 24 states the delay after which the animation should start.
  • Line 27 is the core of the animation process. The various transformations that should be animated. This step consists of 4 transformations all concatenation into one transformation.
  • There are basic 4 transforms

    • CGAffineTransformMakeTranslation(-12,0) This statement states that your context will move to left by 12 px and 0 up or down.
    • CGAffineTransformMakeScale(3,3) Will multiply the width and height by 3 and 3 respectively.
    • CGAffineTransformMakeRotation(3.14) Will rotate the context by (pi) 3.14 . You can rotate from 0(0) to 180 ((pi) 3.14) degress repectively (clock wize for positive and anti clock wise for negative.).
    • CGAffineTransformMake(1,2,3,4,5,6) This statement directly works on the animation matrix. For more information on this.   ref wiki and iPhone docs.

    The last statement actually starts the animation.

  • This is a small picture to animate small rectangle the complete view can be animated transformational similarly.



1. John Doner - December 18, 2009

Thanks for the animation tutorial. I looked in several books, and at several other on-line tutorials, and yours was the easiest to comprehend quickly. I’m glad you took the trouble to write it.

John R. Doner

2. Shyam - May 6, 2010

How to set it normal after rotation?

Ameya - May 6, 2010

You have to differentiate the actual view and the display view. After you have finished your job of transforming the display view, simply give the display view the reference of actual view to get the display view back to normal.

3. 2010 in review « iPhone App Dev Help - January 3, 2011

[…] View Animation Tutorial August 2009 3 comments 3 […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: