过渡色

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 属性，我们需要一个技巧来制作一个动画来改变 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];