Back Button Animation in Navigation Controller

Question

CATransitions can be used to animate transitions in Navigation Controllers when drilling down. However when using Back button og Navigation Controller (going back up) animation is still slide out. Does anyone know how to attach CATransition to the Back button of Navigation Controller? thanks.

Code used to animate when "drilling down":

CATransition *transition = [CATransition animation];
transition.duration = 1;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromTop;
transition.delegate = self;
[self.navigationController.view.layer addAnimation:transition forKey:nil];

You can refer this link https://stackoverflow.com/a/45343228/5437576 — User558, Jul 27 '17 at 06:48

score 7 · Answer 1 · edited Nov 01 '12 at 06:23

There is no need to create a custom button... You can simply do something like this:

- (void)viewWillDisappear:(BOOL)animated
{
    if ([self.navigationController.viewControllers indexOfObject:self]==NSNotFound) {
        // back button was pressed.  We know this is true because self is no longer
        // in the navigation stack.  
        CATransition *transition = [CATransition animation];
        [transition setDuration:0.75];
        [transition setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
        [transition setType:@"oglFlip"];
        [transition setSubtype:kCATransitionFromLeft];
        [transition setDelegate:self];
        [self.navigationController.view.layer addAnimation:transition forKey:nil];
    }

    [super viewWillDisappear:animated];
}

Edit: you must add the quartz framework first in order to use CATransition

I just tried this and worked out of the box (nice animation and all :-) Will this go through apple's review? Why this overrides the custom navigation's animation? (I mean, I'm glad it does, but wouldn't have said so based on the code) — alasker, Sep 12 '14 at 13:41

score 6 · Answer 2 · edited Mar 03 '11 at 10:41

For adding animation to the back button, you have to create your own back button, and on the back button action specify the animation you want.

Adding a back button to the navigation bar: add this line to your viewDidLoad method:

self.navigationItem.leftBarButtonItem=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemReply target:self action:@selector(back)];

In the back method add this code:

CATransition *transition = [CATransition animation];
transition.duration = 1;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromBottom;
transition.delegate = self;
[self.navigationController.view.layer addAnimation:transition forKey:nil];
[self.navigationController popViewControllerAnimated:YES];

The answer posted by shadowfax didn't completely remove the slide animation done by the presenting view controller. Using this answer (custom back button) worked best to replace the animation, although I now have to provide a custom back button image. — Richard McCluskey, Nov 26 '14 at 19:51

score 0 · Answer 3 · answered Jun 30 '10 at 04:24

0

I'm not sure I understand the question. UINavigationController already uses a slide transition when switching views. If you want to attach a custom transition to the back button, you're going to have to create a custom back button and connect it to an action that will run your CATransition code.

answered Jun 30 '10 at 04:24

indragie

18,002
16
95
164

That's the thing. UINavigationController uses slide transitions and I need it to flip. – vilo Jul 07 '10 at 08:28

score 0 · Answer 4 · answered Aug 20 '15 at 05:51

0

If you want animation like back button of navigation controller bar just put following code in your action.

[self.navigationController popViewControllerAnimated:YES];

answered Aug 20 '15 at 05:51

Mohammad Kamran Usmani

868
11
12

score 0 · Answer 5 · answered Mar 20 '17 at 10:32

Swift 3 version of shadowfax answer:

    let transition:CATransition = CATransition.init()
    transition.duration = 0.75
    transition.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut)
    transition.type = "oglFlip"
    transition.subtype = kCATransitionFromRight
    //transition.delegate = self // not needed
    self.navigationController?.view.layer.add(transition, forKey:nil)

Back Button Animation in Navigation Controller

5 Answers5

Linked