Search code examples
iphonecore-animation

animating a hide/show of UIView following Apple example


I'm trying to do some simple animation. I have a UIViewController that has two views in it, that are subviews of the main view. (In Interface Builder, I created two UIView objects, both their own subview of the view that gets created automatically in the .xib from the UIViewController template). I have the second view hidden in IB. The View Controller gets presented modally as a UIModalPresentationFormSheet. When a button is pressed, I want to hide the first view, go to the second view. I tried following's Apple example here: http://developer.apple.com/library/ios/#samplecode/ViewTransitions/Listings/Classes_ViewTransitionsAppDelegate_m.html#//apple_ref/doc/uid/DTS40007411-Classes_ViewTransitionsAppDelegate_m-DontLinkElementID_4

Here is my code when the button is pressed:

    CATransition *transition = [CATransition animation];
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.duration = 0.75;
    transition.type = kCATransitionReveal;
    [self.view.layer addAnimation:transition forKey:nil];
    self.FirstScreen.hidden = YES;
    self.SecondScreen.hidden = NO;

Unfortunately, I do not get any animation. I get the hide/unhide I want, but no transitioning animation. So my first question is what am I doing wrong in code?

A side question is, can you do something like this with blocks? I've done some simple animations in blocks like changing the alpha with

[UIView animationWithDuration... ]

But wasn't sure how to do the above transition with blocks.


Solution

  • Instead of animating hidden property try to animate:

    self.FirstScreen.alpha = 0.0;
    self.SecondScreen.alpha = 1.0;
    

    or

    self.FirstScreen.layer.opacity = 0.0;
    self.SecondScreen.layer.opacity = 1.0;
    

    from here - UIView Class Reference

    The following properties of the UIView class are animatable:

    @property frame   
    @property bounds   
    @property center  
    @property transform   
    @property alpha   
    @property backgroundColor   
    @property contentStretch
    

    Another solution:

    [UIView animateWithDuration:0.75 delay:0 
                     options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{
                             self.FirstScreen.alpha = 0.0;
                             self.SecondScreen.alpha = 1.0; 
                         }
                         completion:nil];