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 :)

Answer 1

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.

Answer 2

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?

Answer 3

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) {
}];