Transition color

Question

I would like to change the color of my navigation bar, with animation.

I tried CATransition but I can't find how to change the color with that.

Is there a way to change the color with a fading or any other animation ? Like TransitionDrawable in Android.

Thanks.

Answer 1

I tried some stuff and finally ended up with this solution. It doesn't need any extra layers, images or transition views and makes use of the built-in animation of the bar.

Therefore it does not hide any titles and bar buttons that you have placed on your navigation bar. If the nav bar is below a status bar, the status bar's color will also be changed.

This is tested with iOS7, both for simulator as well as real device (iPad)

The code:

Right below your imports do

#define STEP_DURATION 0.01

You can play with this value for a smoother animation

This is the method that you want to call

[self animateNavigationBarFromColor:[UIColor greenColor] toColor:[UIColor blueColor] duration:2.5];

Parameters should be self-explaining (duration is in seconds).

And this is the actual code

- (void)animateNavigationBarFromColor:(UIColor *)fromColor toColor:(UIColor *)toColor duration:(NSTimeInterval)duration
{
    NSUInteger steps = duration / STEP_DURATION;

    CGFloat fromRed;
    CGFloat fromGreen;
    CGFloat fromBlue;
    CGFloat fromAlpha;

    [fromColor getRed:&fromRed green:&fromGreen blue:&fromBlue alpha:&fromAlpha];

    CGFloat toRed;
    CGFloat toGreen;
    CGFloat toBlue;
    CGFloat toAlpha;

    [toColor getRed:&toRed green:&toGreen blue:&toBlue alpha:&toAlpha];

    CGFloat diffRed = toRed - fromRed;
    CGFloat diffGreen = toGreen - fromGreen;
    CGFloat diffBlue = toBlue - fromBlue;
    CGFloat diffAlpha = toAlpha - fromAlpha;

    NSMutableArray *colorArray = [NSMutableArray array];

    [colorArray addObject:fromColor];

    for (NSUInteger i = 0; i < steps - 1; ++i) {
        CGFloat red = fromRed + diffRed / steps * (i + 1);
        CGFloat green = fromGreen + diffGreen / steps * (i + 1);
        CGFloat blue = fromBlue + diffBlue / steps * (i + 1);
        CGFloat alpha = fromAlpha + diffAlpha / steps * (i + 1);

        UIColor *color = [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
        [colorArray addObject:color];
    }

    [colorArray addObject:toColor];

    [self animateWithArray:colorArray];
}

- (void)animateWithArray:(NSMutableArray *)array
{
    NSUInteger counter = 0;

    for (UIColor *color in array) {
        double delayInSeconds = STEP_DURATION * counter++;
        dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
        dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
            [UIView animateWithDuration:STEP_DURATION animations:^{
                self.navigationController.navigationBar.barTintColor = color;
            }];
        });
    }
}

Drawback: It's not buttery smooth :(

Answer 2

Is your fading just meaning changing alpha of navigationBar, See this code:

if ([self.navigationController.navigationBar respondsToSelector:@selector(setBarTintColor:)]) {
    [self.navigationController.navigationBar setBarTintColor:[UIColor blueColor]];
} else {
    self.navigationController.navigationBar.tintColor = [UIColor blueColor];
}

self.navigationController.navigationBar.alpha = 0.f;
[UIView animateWithDuration:.2f animations:^{
    self.navigationController.navigationBar.alpha = 1.f;
} completion:^(BOOL finished) {
    //
}];

Answer 3

I find a solution that I will explain here.

As we can't change the backgroundColor attribut, we will need a trick to make an animation for changing the navBar color with animation.

I choose to put above my navBar an identical subview with CATransition.

CGRect frame = self.navigationController.navigationBar.frame;
UIView *view = [[UIView alloc] initWithFrame:frame];
[view setBackgroundColor:[UIColor redColor]];
UIImageView *logo = [[UIImageView alloc] initWithFrame:CGRectMake(77,3,163,38)];
[logo setImage:[UIImage imageNamed:@"icon_transparent.png"]];
[view addSubview:logo];

CATransition *myAnimationView = [CATransition animation];
[myAnimationView setDuration:1.5f];
[myAnimationView setType:kCATransitionReveal];
[myAnimationView setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[[view layer] addAnimation:myAnimationView forKey:kCATransitionReveal];
[self.navigationController.navigationBar addSubview:view];