iPhone Development 101

iPhone 101

Code Tips

Resources

Links

Follow

TwitterRSSE-mail

More

iPhone Development 101: User Interface:
UIView Animations

UIView is the parent class for display objects on the iPhone (unless you're using Core Animation or OpenGL). Buttons, text fields, and images are all children of UIView.

A view can contain other views. If it does, it is said to be the superview to the contained views, which are called subviews. To add a subview to an existing UIView:

[viewObj addSubview:otherViewObj];

To remove a subview from its superview:

[otherViewObj removeFromSuperview];

To adjust the size or position of a view, see View Frames and Bounds.

Animating Views

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)

In iOS 4 and later, you can use animation blocks to animate the above properties. (Older versions of iOS used beginAnimation/commitAnimations.) There are three block-based animation methods you can use:

animateWithDuration:animations:
animateWithDuration:animations:completion:
animateWithDuration:delay:options:animations:completion:

Here's a simple example. This moves a view to a new location:

CGRect newFrame = theView.frame;
newFrame.origin.x += 500;    // shift right by 500pts

[UIView animateWithDuration:1.0 
    animations:^{
        theView.frame = newFrame;
    }];

If you want to run another animation (or trigger some action) after the first animation finishes, use animateWithDuration:animations:completion:

[UIView animateWithDuration:1.0 
    animations:^{
        theView.frame = newFrame;    // move
    }
    completion:^(BOOL finished){
        // code to run when animation completes
        // (in this case, another animation:)
        [UIView animateWithDuration:1.0 
           animations:^{        
              theView.alpha = 0.0;   // fade out
           }
           completion:^(BOOL finished){  
              [theView removeFromSuperview];           
           }];
    }];

To specify animation options (such as the animation curve), or delay the start of animation, use animateWithDuration:delay:options:animations:completion:

[UIView animateWithDuration:1.0 
    delay: 0.5
    options: UIViewAnimationOptionCurveEaseIn
    animations:^{
        theView.frame = newFrame;   // move
    }
    completion:nil];  // no completion handler

Animation options allow you to specify the type of animation, repeat/autoreverse options, and whether to allow user interaction while the view is animating. To specify multiple options:

    options: UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction;

Rotation

To rotate a view, apply a CGAffineTransformMakeRotation result to the view's .transform property:

float degrees = 45.0;
float radians = (degrees/180.0) * M_PI; 

[UIView animateWithDuration:0.25
    animations:^{
      theView.transform = CGAffineTransformMakeRotation(radians);
    }];

Undoing Rotations

To restore a view to its original angle, set its transform property to CGAffineTransformIdentity.

theView.transform = CGAffineTransformIdentity;

This example rotates the view by 45 degrees, then rotates it back on completion:

float degrees = 45.0;
float radians = (degrees/180.0) * M_PI; 

[UIView animateWithDuration:0.25
    animations:^{
      theView.transform = CGAffineTransformMakeRotation(radians);
    }
    completion:^(BOOL finished){
    
        [UIView animateWithDuration:0.25
             animations:^{
                theView.transform = CGAffineTransformIdentity;
             }];
    
    }];

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

Additional References


TopHome