iPhone Development 101
Home

iPhone 101

Learning iOS Programming

Code Tips

Objective-C
User Interface
Distribution
Marketing

Resources

Buttons & Icons

More

Privacy
Contact

Animating Views

This is the original pre-iOS4 way to do UIView animations. It still works, but in iOS 4 and later, you can use animation blocks instead.

A view's size, location, rotation or transparency can be animated using several UIView class methods. You can animate the following view properties:

frame Moves or resizes the view within its superview
center Moves the view within its superview
bounds Changes the view's bounding box
transform Rotate, scale, translate, or skew the view
alpha Adjusts the view's transparency (alpha) level, from 0.0 (transparent) to 1.0 (opaque)

To create an animation, set up a beginAnimations block and define the details of the animation. 

    // begin the animations block:
    [UIView beginAnimations:@"animationID" context:NULL];

    // define how long the animation should take, in seconds. 0.5 is half a second.
    [UIView setAnimationDuration:durationInSeconds];

    // animate the view itself by changing its frame:
    [theView setFrame:newFrame];
    // or by changing its alpha value:
    [theView setAlpha:0.5];
    // or by rotating it:
    theView.transform = CGAffineTransformMakeRotation(-0.7853981625); // 45 deg

    // optional: to execute code after the animation has finished, set the delegate:    
    [UIView setAnimationDelegate:self];
    
    // optional: set the animation curve:
    //   UIViewAnimationCurveEaseIn: begins slowly, then speeds up
    //   UIViewAnimationCurveEaseOut: begins fast, then slows down
    //   UIViewAnimationCurveEaseInOut: begins slowly, faster in the middle, slows down at end
    //   UIViewAnimationCurveLinear: same speed throughout
    [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];

    // start animating!
    [UIView commitAnimations];

This example moves the view named viewToMove over and down by 10 pixels: 

- (void)moveDown 
{
    CGRect startFrame = [viewToMove frame];    
    [UIView beginAnimations:@"move10" context:NULL];
    [UIView setAnimationDuration:1.0];
    [viewToMove setFrame:CGRectMake(startFrame.origin.x + 10, startFrame.origin.y + 10, startFrame.size.width, startFrame.size.height)];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
    [UIView commitAnimations];
}

To chain multiple animations together, you must set an animation delegate, and implement the animationDidStop:finished:context: method in the delegate object. Then test for the animation ID: 

- (void)animationDidStop:(NSString *)animID finished:(BOOL)didFinish context:(void *)context 
{
    if ( [animID isEqualToString:@"move10"] ) {
        NSLog(@"move10 animation finished.");
        [self moveBack];
    }
    else if ( [animID isEqualToString:@"moveBack"] ) {
        NSLog(@"done moving.");
    }
}

- (void)moveBack {
    CGRect startFrame = [viewToMove frame];
    [UIView beginAnimations:@"moveBack" context:NULL];
    [UIView setAnimationDuration:1.0];
    [viewToMove setFrame:CGRectMake(startFrame.origin.x - 10, startFrame.origin.y - 10, startFrame.size.width, startFrame.size.height)];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
    [UIView commitAnimations];
}

Undoing Rotations

If you rotate a view by a certain angle, you may want to rotate it back when the animation has completed. However, simply rotating the view again by the reverse angle doesn't have the desired effect. To restore a view to its original angle, set its transform property to CGAffineTransformIdentity: 

theView.transform = CGAffineTransformIdentity;

See the UIView Class Methods documentation for more info on the various animation methods.

Additional References

Top • Home