过渡色

Question

我想用动画更改导航栏的颜色。

我尝试过CATransition，但我找不到如何用它来改变颜色。

有没有办法通过淡化或任何其他动画来改变颜色？  与Android中的TransitionDrawable一样。

感谢。

Answer 1

我尝试了一些东西，最后得到了这个解决方案。它不需要任何额外的图层，图像或过渡视图，并且可以使用条形图的内置动画。

因此，它不会隐藏您在导航栏上放置的任何标题和栏按钮。如果导航栏位于状态栏下方，状态栏的颜色也将更改。

这是使用iOS7测试的，无论是模拟器还是真实设备（iPad）

代码：

在您的导入正下方

#define STEP_DURATION 0.01

您可以使用此值播放更流畅的动画

这是您要调用的方法

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

参数应该是自我解释的（持续时间以秒为单位）。

这是实际的代码

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

缺点：它并不是一蹴而就：（

Answer 2

您的fading只是意味着更改navigationBar的alpha，请参阅此代码：

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

我找到了一个解决方案，我将在这里解释。

由于我们无法更改backgroundColor attribut，我们需要一个技巧来制作动画，以便通过动画更改navBar颜色。

我选择在我的navBar上方放置一个与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];