UINavigationBar change Tint color with animation

Question

Is it possible to change the tint with animation for a smoother effect?

This doesn't work for me:

[UIView beginAnimations:nil context:nil];
[self.navigationController.navigationBar setTintColor:[UIColor greenColor]];
[UIView commitAnimations];

I a not sure if it is even possible using native apple components as I guess they will be using CG to generate the gradient ... just want to find out before I'll start building my own solution ...

Cheers guys :)

If you see this post, it's old and we find a solution in another thread : http://stackoverflow.com/questions/20377628/transition-color/20396308?noredirect=1#20396308 — Pull, Dec 05 '13 at 10:02

score 26 · Accepted Answer · edited May 29 '14 at 17:21

26

You wouldn't believe the length I went through to actually make that possible; it annoyed me to no end that this isn't a stock iOS feature and that transition of tintColor look ugly while the animation to push/pop a viewController is so smooth.

There'a lot of code that checks when to fade, and I've even written a class called PSPDFNavigationAppearanceSnapshot to preserve the navigation state when being popped. (I got that idea from the awesome NimbusKit)

The actual animation is pretty easy:

[self.navigationController.navigationBar.layer addAnimation:PSPDFFadeTransition() forKey:nil];

CATransition *PSPDFFadeTransition(void) {
    return PSPDFFadeTransitionWithDuration(0.25f);
}

CATransition *PSPDFFadeTransitionWithDuration(CGFloat duration) {
    CATransition *transition = [CATransition animation];
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    transition.type = kCATransitionFade;
    transition.duration = duration;
    return transition;
}

You can compact that code even more; it's a snipped from my iOS PDF library PSPDFKit and I use the fade in various places, thus the helper functions.

edited May 29 '14 at 17:21

Sam Soffes

14,831
9
76
80

answered Sep 17 '12 at 09:26

steipete

7,581
5
47
81

1

Why in PSPDFFadeTransitionWithDuration you have a duration param that you never use it? It think you forgot to write transition.duration = duration – Luca Bernardi Dec 18 '12 at 21:07
Correct, that needs to be added as well. – steipete Dec 19 '12 at 00:05
When user drags edge from right and then drags screen to left back, flash can be seen. Is there any way to fix it? To cancel transition? – Igor Palaguta Dec 28 '15 at 20:23
1

For reference, nowadays you can use `UINavigationControllerHideShowBarDuration` for getting an animation duration instead of hardcoding that `0.25f`. – Alejandro Iván Oct 20 '16 at 17:29

score 4 · Answer 2 · edited May 23 '17 at 12:25

4

We find the solution in another thread : Transition Color navBar

The solution was animating the attribut barTinTColor. Here is the code :

 self.navigationController.navigationBar.barTintColor = [UIColor redColor];
 [UIView animateWithDuration:5.0f animations:^{
    self.navigationController.navigationBar.barTintColor = [UIColor blueColor];
} completion:^(BOOL finished) {
}];

edited May 23 '17 at 12:25

Community

1
1

answered Dec 05 '13 at 10:09

Pull

2,236
2
16
32

5

Stopped animating in iOS 10. – cvb Sep 15 '16 at 14:55
Just add this in completion to work on iOS 10 `[self.navigationController.navigationBar layoutIfNeeded];` – Paul Razvan Berg Aug 21 '17 at 11:32

Adam Eberbach · Answer 3 · 2011-04-12T01:36:11.393

You can't animate bar tint - the list of properties (for a UIView) that can be animated in this way is here.

I don't think you can do that at all unless you want to overlay a bar that has a neutral tint with a UIView whose background color is changing. backgroundColor is one of the properties that can be animated. But you may have to get sneaky if you want to put a UIView on top of the navigation bar, I don't know of a way to do that.

Another thought - subclassing and doing the drawing yourself in drawRect?

UINavigationBar change Tint color with animation

3 Answers3

Linked