SriTeja Chilakamarri
SriTeja Chilakamarri

Reputation: 2703

How to get a fade out animation while dismissing a view controller

I have an Image view in my View Controller. I want to dismiss the view controller when a Pan gesture is recognized towards the down side of the view controller. While I have achieved dismiss the view controller with a Pan gesture, I am trying to figure out how can I add an animation before dismissing just like as in the Photos application in the iPhone.

 -(void)addPanGesture{

    UIPanGestureRecognizer *gestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(dismissViewGes:)];
    gestureRecognizer.delegate = self;
    [self.view addGestureRecognizer:gestureRecognizer];


}



-(void)dismissViewGes:(UIPanGestureRecognizer *)gesture {


    CGPoint velocity = [gesture velocityInView:self.view];


    if(velocity.y > 0)
    {



        CATransition *transition = [[CATransition alloc]init];
        transition.duration = 2;
        [transition setValue:[NSNumber numberWithFloat:0.5f] forKey:kCATransitionFade];
        transition.subtype = kCATransitionFromTop;
        [self.view.layer addAnimation:transition forKey:nil];

        [[NetWrapper shared] addRemovedController:self];
        [self dismissViewControllerAnimated:NO completion:nil];


    }

}

I tried adding a CATransition hoping that the fade out animation will work but it is not working, the view dismisses as soon as the pan gesture is applied.

How can i add in a fade out while with the view dismissing just like in the photos application.

Photo viewer. I have this right now and when i use Pan gesture on this view it gets dismissed. But i want to add an animation so that it gets dismissed as in the second picture

This is the animation I want to achieve

Upvotes: 4

Views: 7990

Answers (3)

Đorđe Nilović
Đorđe Nilović

Reputation: 3739

Swift 4.2, iOS 11

Here is an elegant way using extensions:

extension CATransition {
    func fadeTransition() -> CATransition {
        let transition = CATransition()
        transition.duration = 0.4
        transition.type = CATransitionType.fade
        transition.subtype = CATransitionSubtype.fromRight

        return transition
    }
}

Then you can just write these three lines of code in a function or inside the action button in your UIViewController:

private func dismissVC() {
    let transition = CATransition().fadeTransition()
    navigationController?.view.layer.add(transition, forKey: kCATransition)
    navigationController?.popViewController(animated: false)
}

Upvotes: 5

成文权
成文权

Reputation: 97

Try this:

@IBAction func clickDismiss(_ sender: Any) {
    let transition: CATransition = CATransition()
    transition.duration = 0.5
    transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    transition.type = kCATransitionFade
    transition.subtype = kCATransitionFromBottom
    self.view.window!.layer.add(transition, forKey: nil)
    self.dismiss(animated: false, completion: nil)
}

I present a SubViewController and add a UIButton on it. Add those codes to The button click event and It's work for me.

Upvotes: 8

RodolfoAntonici
RodolfoAntonici

Reputation: 1645

If you need to add animation on presenting or dismissing a ViewController you should use UIViewControllerAnimatedTransitioning, there's a similar answer here: How do I do a Fade/No transition between view controllers

If you need it to be interactive, you can use UIPercentDrivenInteractiveTransition, which is a class that controls the transition in percentages.

About all this there's a great sample code from Apple: https://developer.apple.com/library/content/samplecode/CustomTransitions/Introduction/Intro.html It's a little old but it's simple.

Upvotes: 0

Related Questions