Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS: Customize Back Button Transition Animation

I have a view controller (inherits from UIViewController) that has custom logic for presenting data. It can init a new view controller (of the same type) and display it using [self.navigationController pushViewController:next animated:NO] (where next is the newly instantiated controller), creating an experience of a "stack of views", using the navigation controller default back button to navigate up the stack.

Now, before calling pushViewController:animated: I am able to customize the transition animation by calling [self.navigationController.view.layer addAnimation:animation forKey:nil]. This works wonderfully for "going down the stack" of views.

But since navigation up the stack is done the default way with a default back button, the transition used is the default slide-fro-left animation which doesn't match my customized animation.

How can I customize this transition animation?

EDIT:

I took the ideas given here and came up with:

UIBarButtonItem *back = [[UIBackButtonItem alloc] initWithTitle:@"\U000025C0\U0000FE0E" style:UIBarButtonItemStylePlain target:self action:@selector(back:)];
[self.navigationItem setLeftBarButtonItem:back]

And the transition:

- (IBAction)back:(id)sender {
    CATransiotion *animation = [CATransition animation];
    animation.duration = 0.3f;
    amimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.type = kCATransitionMoveIn;
    [self.navigationController.view.layer addAnimation:animation forKey:nil];
    [self.navigationController popViewControllerAnimated:NO];
}

The only downside is the appearance of the new back button which I'm willing to live with.

Thanks for the answers :)

like image 369
Itai Hanski Avatar asked Jun 09 '26 21:06

Itai Hanski


2 Answers

I guess you have to make your custom back button, and attach your animations to it, eg.

- (IBAction) back:(id)sender
{       
    [UIView transitionWithView:self.navigationController.view
                      duration:0.5
                       options:UIViewAnimationOptionTransitionFlipFromLeft
                    animations:^{ [self.navigationController popViewControllerAnimated:NO]; }
                    completion:NULL];
}
like image 175
Mindaugas Avatar answered Jun 12 '26 12:06

Mindaugas


This code got from this Queston.

For this type of transition I would really recommend a modal view controller, thats the way the system was designed.

But if you insist on using the navigation controller there is a way, though somewhat ugly.

[CATransaction begin];
[CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];

CATransition *transition = [CATransition animation];
[transition setType:kCATransitionFade];
[self.navigationController.view.layer addAnimation:transition forKey:@"someAnimation"];

[self.navigationController popViewControllerAnimated:YES];
[CATransaction commit];

The CATransaction will disable all standard animations. The CATransition adds a fade transition to the navigation controller layer when views are swapped (in this case removing the viewcontroller view that is popped).

And also Refer this How to change the Push and Pop animations in a navigation based app

like image 30
iPatel Avatar answered Jun 12 '26 12:06

iPatel



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!