By Keith Fitzgerald


2009-03-10 13:52:58 8 Comments

What is considered best practice for animating view transitions on the iPhone?

For example, the ViewTransitions sample project from apple uses code like:

CATransition *applicationLoadViewIn = [CATransition animation];
[applicationLoadViewIn setDuration:1];
[applicationLoadViewIn setType:kCATransitionReveal];
[applicationLoadViewIn setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[[myview layer] addAnimation:applicationLoadViewIn forKey:kCATransitionReveal];

but there are also code snippets floating around the net that look like this:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationDelegate:self];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];
[myview removeFromSuperview];
[UIView commitAnimations];

What is the best approach? If you could provide a snippet as well it'd be much appreciated.

NOTE: I've been unable to get the second approach to work correctly.

9 comments

@Saurabh Sharma 2017-03-15 12:50:19

let's do try and checkout For Swift 3...

UIView.transition(with: mysuperview, duration: 0.75, options:UIViewAnimationOptions.transitionFlipFromRight , animations: {
    myview.removeFromSuperview()
}, completion: nil)

@Rafael Vega 2010-08-09 15:02:30

From the UIView reference's section about the beginAnimations:context: method:

Use of this method is discouraged in iPhone OS 4.0 and later. You should use the block-based animation methods instead.

Eg of Block-based Animation based on Tom's Comment

[UIView transitionWithView:mysuperview 
                  duration:0.75
                   options:UIViewAnimationTransitionFlipFromRight
                animations:^{ 
                    [myview removeFromSuperview]; 
                } 
                completion:nil];

@Steve N 2010-09-08 15:03:31

So.. to be clear, that means use the first approach (CATransition), not the second?

@NebulaFox 2010-10-24 12:44:20

Yes, it is the first approach (CATransition).

@Dan Rosenstark 2010-11-18 17:20:54

@Steven N, no, it means to use the block-based animations on UIView instead. They're essentially the same as beginAnimations and friends, but use block/closure features.

@Tom van Zummeren 2011-01-15 14:36:56

Yes, Yar is right. This is how a block animation looks like: [UIView transitionWithView:mysuperview duration:0.75 options:UIViewAnimationTransitionFlipFromRight animations:^{ [myview removeFromSuperview]; } completion:nil] Check the UIView documentation for details.

@ZaBlanc 2011-03-19 05:19:11

Except if you want to support 3.1.3 phones. Then don't use blocks.

@Rafael Vega 2013-02-12 22:38:24

Just curious, no intention to start a war: why the downvotes? :)

@Deepukjayan 2012-03-08 04:12:12

Anyway the "Block" method is preffered now-a-days. I will explain the simple block below.

Consider the snipped below. bug2 and bug 3 are imageViews. The below animation describes an animation with 1 second duration after a delay of 1 second. The bug3 is moved from its center to bug2's center. Once the animation is completed it will be logged "Center Animation Done!".

-(void)centerAnimation:(id)sender
{
NSLog(@"Center animation triggered!");
CGPoint bug2Center = bug2.center;

[UIView animateWithDuration:1
                      delay:1.0
                    options: UIViewAnimationCurveEaseOut
                 animations:^{
                     bug3.center = bug2Center;
                 } 
                 completion:^(BOOL finished){
                     NSLog(@"Center Animation Done!");
                 }];
}

Hope that's clean!!!

@pnizzle 2012-07-07 09:41:53

you assigned the CGPoint bug3.center to bug3Center and just after that you assign the CGPoint bug2.center to the same variable bug3Center ? Why are you doing that ?

@Deepukjayan 2013-10-28 10:13:21

oopss!! thats a typo buddies. Updated now.

@iPatel 2013-07-03 07:19:52

Here is Code for Smooth animation, might Be helpful for many developers.
I found this snippet of code from this tutorial.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[animation setAutoreverses:YES];
[animation setFromValue:[NSNumber numberWithFloat:1.3f]];
[animation setToValue:[NSNumber numberWithFloat:1.f]];
[animation setDuration:2.f];
[animation setRemovedOnCompletion:NO];

[animation setFillMode:kCAFillModeForwards];
[[self.myView layer] addAnimation:animation forKey:@"scale"];/// add here any Controller that you want t put Smooth animation.

@Dilip Rajkumar 2012-10-05 07:08:04

I found a good tutorial in this link. Hope this will be helpful for some one.

uiview-animation-tutorial

@Chris 2011-10-11 10:19:40

In the UIView docs, have a read about this function for ios4+

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

@mahboudz 2009-05-04 08:22:52

I have been using the latter for a lot of nice lightweight animations. You can use it crossfade two views, or fade one in in front of another, or fade it out. You can shoot a view over another like a banner, you can make a view stretch or shrink... I'm getting a lot of mileage out of beginAnimation/commitAnimations.

Don't think that all you can do is:

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];

Here is a sample:

[UIView beginAnimations:nil context:NULL]; {
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    if (movingViewIn) {
// after the animation is over, call afterAnimationProceedWithGame
//  to start the game
        [UIView setAnimationDidStopSelector:@selector(afterAnimationProceedWithGame)];

//      [UIView setAnimationRepeatCount:5.0]; // don't forget you can repeat an animation
//      [UIView setAnimationDelay:0.50];
//      [UIView setAnimationRepeatAutoreverses:YES];

        gameView.alpha = 1.0;
        topGameView.alpha = 1.0;
        viewrect1.origin.y = selfrect.size.height - (viewrect1.size.height);
        viewrect2.origin.y = -20;

        topGameView.alpha = 1.0;
    }
    else {
    // call putBackStatusBar after animation to restore the state after this animation
        [UIView setAnimationDidStopSelector:@selector(putBackStatusBar)];
        gameView.alpha = 0.0;
        topGameView.alpha = 0.0;
    }
    [gameView setFrame:viewrect1];
    [topGameView setFrame:viewrect2];

} [UIView commitAnimations];

As you can see, you can play with alpha, frames, and even sizes of a view. Play around. You may be surprised with its capabilities.

@Ryan McCuaig 2009-03-10 15:24:45

The difference seems to be the amount of control you need over the animation.

The CATransition approach gives you more control and therefore more things to set up, eg. the timing function. Being an object, you can store it for later, refactor to point all your animations at it to reduce duplicated code, etc.

The UIView class methods are convenience methods for common animations, but are more limited than CATransition. For example, there are only four possible transition types (flip left, flip right, curl up, curl down). If you wanted to do a fade in, you'd have to either dig down to CATransition's fade transition, or set up an explicit animation of your UIView's alpha.

Note that CATransition on Mac OS X will let you specify an arbitrary CoreImage filter to use as a transition, but as it stands now you can't do this on the iPhone, which lacks CoreImage.

@Ryan McCuaig 2011-04-18 19:34:38

Note that this is iOS 2.0-era advice. See Rafael Vega's answer on block-based methods if you're on iOS 4.0 or up.

@Aaron Ash 2012-03-31 14:31:09

Also note that CoreImage is now available as of iOS 5, but only a few of its features. I believe you can use a CoreImage transition in an animation, but you can't make custom CoreImage filters on iOS (5).

@Guru 2012-01-20 09:10:50

We can animate images in ios 5 using this simple code.

CGRect imageFrame = imageView.frame;
imageFrame.origin.y = self.view.bounds.size.height;

[UIView animateWithDuration:0.5
    delay:1.0
    options: UIViewAnimationCurveEaseOut
    animations:^{
        imageView.frame = imageFrame;
    } 
    completion:^(BOOL finished){
        NSLog(@"Done!");
    }];

@johnbakers 2012-08-06 03:23:14

this is available in iOS 4 as well and is referred to as a "block based" animation. It is not restricted to iOS 5 and later.

Related Questions

Sponsored Content

40 Answered Questions

[SOLVED] How can I develop for iPhone using a Windows development machine?

  • 2008-08-22 13:35:01
  • ryan
  • 1101915 View
  • 1163 Score
  • 40 Answer
  • Tags:   ios iphone windows

23 Answered Questions

27 Answered Questions

[SOLVED] UIView Infinite 360 degree rotation animation?

21 Answered Questions

[SOLVED] Giving UIView rounded corners

32 Answered Questions

[SOLVED] UIView with rounded corners and drop shadow?

17 Answered Questions

[SOLVED] Cancel a UIView animation?

5 Answered Questions

[SOLVED] iPhone - Get Position of UIView within entire UIWindow

32 Answered Questions

[SOLVED] Can I embed a custom font in an iPhone application?

  • 2008-12-11 20:21:11
  • Airsource Ltd
  • 235938 View
  • 771 Score
  • 32 Answer
  • Tags:   ios cocoa-touch fonts

7 Answered Questions

[SOLVED] Gradients on UIView and UILabels On iPhone

2 Answered Questions

[SOLVED] UIView beginAnimations with subviews

Sponsored Content