vilo
vilo

Reputation: 51

Back Button Animation in Navigation Controller

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];

Upvotes: 4

Views: 4931

Answers (5)

smukamuka
smukamuka

Reputation: 1537

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)

Upvotes: 0

Mohammad Kamran Usmani
Mohammad Kamran Usmani

Reputation: 878

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

[self.navigationController popViewControllerAnimated:YES];

Upvotes: 0

shadowfax
shadowfax

Reputation: 289

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

Upvotes: 7

Mandar Khole
Mandar Khole

Reputation: 81

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.

  1. 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)];
    
  2. 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];
    

Upvotes: 6

indragie
indragie

Reputation: 18122

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.

Upvotes: 0

Related Questions