Question

I have my main view, and when a user taps a ‘Show’ button I want two things to happen:

1. Fade in a black UIView with alpha 0.5 covering the entire parent
   view. I’ll refer to this as darkenBackground
2. Slide the view of a second view controller
   (self.secondViewController.view) on top of darkenBackground

When a user is finished, they tap ‘Done’ and the following happens:

1. darkenBackground fades out and is removed from the superview.
2. self.secondViewController.view slides out of the screen in the
   bottom direction and is removed from the superview.

All animations working simultaneously.

So far, I’ve been able to achieve the first part (sort-of), transition-in. This works fine. But when the user taps ‘Done’ the transition-out does not work as required. The problems I’m faced with are:

1. darkenBackground and self.secondViewController.view fade out and are removed, but
   self.secondViewController.view wasn’t supposed to fade out! I tried animating only the second view but it simply disappears without animation.
2. When a user taps ‘Show’ for a second time
   (transition-in), the view from the previous transition
   appears before the animation takes place. It doesn’t look like it
   was removed from the superview previously.

Here is my code:

When a user taps ‘Show’:

- (IBAction)showSecondView {

    darkenBackground = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 460)];
    [darkenBackground setBackgroundColor:[UIColor blackColor]];
    [darkenBackground setAlpha:0.5];

    self.secondViewController.view.frame = CGRectMake(0, 0, 320, 460);
    self.secondViewController.view.backgroundColor = [UIColor clearColor];

    [CATransaction begin];

    CATransition *animation = [CATransition animation];
    [animation setDuration:0.5];
    [animation setType:kCATransitionFade];

    CATransition *animation2 = [CATransition animation];
    [animation2 setDuration:0.5];
    [animation2 setType:kCATransitionMoveIn];
    [animation2 setSubtype:kCATransitionFromTop];
    [animation2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

    [self.view addSubview:darkenBackground];
    [self.view addSubview:self.secondViewController.view];

    [[self.view layer] addAnimation:animation forKey:@"darkenBkgFadeIn"];
    [[self.secondViewController.view layer] addAnimation:animation2 forKey:@"ShowSecondView"];

    [CATransaction commit];
}

When a user taps ‘Done’ (A function defined in the secondViewController.m class where it refers to the main view controller variables through delegate):

- (IBAction)hideSecondView {

    [CATransaction begin];

    CATransition *animation = [CATransition animation];
    [animation setDuration:0.5];
    [animation setType:kCATransitionFade];

    CATransition *animation2 = [CATransition animation];
    [animation2 setDuration:0.5];
    [animation2 setType:kCATransitionPush];
    [animation2 setSubtype:kCATransitionFromBottom];
    [animation2 setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];

    [self.myParentController.darkenBackground removeFromSuperview];
    [self.myParentController.secondViewController.view removeFromSuperview];

    [[self.myParentController.view layer] addAnimation:animation forKey:@"darkenBkgFadeOut"];
    [[self.myParentController.secondViewController.view layer] addAnimation:animation2 forKey:@"RemoveSecondView"];

    [CATransaction commit];
}

Ultimately I want to show the view in the same way that the TWTweetComposeViewController modal view appears, where the background darkens and the controller appears. I could just use a modal view controller, but the issue I have with that is that when presenting the view controller it only ‘appears’ and does not slide from the bottom (since I require a semi-transparent background, I cannot use the default context for the modal view).

Cannot figure this one out, would appreciate some guidance.

Answer 1

I assume that self.myParentController.view used in -hideSecondView is the same view as self.view in -showSecondView. If this is the case, then you’re applying a transition to the whole view here:

[[self.myParentController.view layer] addAnimation:animation forKey:@"darkenBkgFadeOut"];

You added self.secondViewController.view as a subview of self.view in -showSecondView, so when you later perform a transition on self.myParentController.view, it’s going to apply the transition to all its subviews (i.e., self.secondViewController.view) as well.

Instead of applying the transition to self.myParentController.view in -hideSecondView, apply it directly to darkenBackground:

[[self.myParentController.darkenBackground layer] addAnimation:animation forKey:@"darkenBkgFadeOut"];

If I recall correctly, you can apply CATransitions when layers are added/removed to/from a view. If not, then you’ll have to wrap darkenBackground in a separate container view and perform the transitions on that so it doesn’t include self.secondViewController.view when you do the fade out.