如何淡化 UIView 背景颜色 - iOS 5

Posted 2023-03-13

【中文标题】如何淡化 UIView 背景颜色 - iOS 5

【英文标题】：How to fade UIView background color - iOS 5

【发布时间】：2013-01-27 00:49:36

【问题描述】：

我在尝试让自定义 UIView 类淡化其背景时遇到问题。我检查了以下 *** 问题，但它们似乎对我不起作用。

Fade background-color from one color to another in a UIView

How do you explicitly animate a CALayer's backgroundColor?

所以我有一个自定义 UIView，用户可以在其中绘制东西。如果他们画的不正确，我想让背景颜色变红然后变回白色。

我在自定义 UIView 中有这个自定义方法调用

- (void)indicateMistake;

当我调用该方法时，我希望它执行背景颜色动画，所以我在方法中有这个：

CABasicAnimation* fade = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
fade.fromValue = (id)[UIColor whiteColor].CGColor;
fade.toValue = (id)[UIColor redColor].CGColor;
[fade setDuration:3];
[self.layer addAnimation:fade forKey:@"fadeAnimation"];

但是当我这样做时似乎什么都没有发生。

然后我尝试了一个愚蠢的旋转动画，看看它是否有效：

CABasicAnimation* rotate = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotate.toValue = [NSNumber numberWithInt:M_PI];
[rotate setDuration:1];
[self.layer addAnimation:rotate forKey:@"rotateAnimation"];

由于某些原因，自定义 UIView 会旋转。

然后阅读更多 *** 答案我尝试了这个：

[UIView animateWithDuration:3 animations:^
    [self setBackgroundColor: [UIColor redColor]];
 completion:^(BOOL finished) 
    [self setBackgroundColor: [UIColor whiteColor]];
];

这会立即将颜色从红色变为白色。有时它是如此之快，我有时看不到它发生。如果我注释掉[self setBackgroundColor: [UIColor whiteColor]];，它会保持红色。但是有节点渐变白到红的效果。

我的想法已经用完了。任何帮助将不胜感激！

【参考方案1】：

[UIView animateWithDuration:0.3f animations:^
   fade.layer.backgroundColor = [UIColor redColor].CGColor;

假设您已将淡入淡出视图预设为您想要的白色。

您最后一次尝试动画跳回白色的原因是因为在 animateWithDuration 的完成子句中，您将视图设置回白色。

该完成子句在动画完成时执行，因此动画（白色-红色）发生，然后您的编译器完成并将淡入淡出视图跳转回白色。

额外的好处：

我相信您可能想知道如何才能变回白色。

好吧，假设按下UIButton 会调用这个名为“animateColors”的函数。话虽如此，只需实现一个 BOOL。

- (void)animateColors         
    if (!isRed) 
        [UIView animateWithDuration:0.3f animations:^
            fade.layer.backgroundColor = [UIColor redColor].CGColor;
        ];
        isRed = YES;
     else if (isRed) 
        [UIView animateWithDuration:0.3f animations:^
            fade.layer.backgroundColor = [UIColor whiteColor].CGColor;
        ];
        isRed = NO;
    

显然，您将希望在接口或头文件中对布尔值 isRed 进行属性声明。

【讨论】：

小修正，没有淡入淡出视图，我尝试了您建议的小调整，self.backgroundColor = [UIColor redColor]; 但仍然没有淡入淡出, 它会立即变红。

我差点忘了。您需要将颜色设置为 CGColor。只需在[UIColor redColor]; 的末尾添加一个 .CGColor。我将进行编辑以反映我在说什么。确保为此添加了 QuartzCore。

我认为只有在设置图层背景颜色时才将其转换为 CGColor。

该死的，你是对的。对不起，我只是在论坛上写这个。我再次编辑了解决方案。它现在应该适合你了。

仍然没有发生任何事情。现在完全没有颜色变化。这与我在第一个示例中尝试执行的图层动画遇到的问题相同。没有发生任何变化。

【参考方案2】：

所以我有一个自定义 UIView，用户可以在其中绘制东西。

我假设这意味着你已经实现了-drawRect:。

IIRC，默认情况下（如果设置了UIView.clearsContextBeforeDrawing），上下文被视图的背景颜色填充，-drawRect:被调用，生成的位图被绘制在屏幕上而不是背景颜色。对此进行动画处理意味着在两个位图之间进行动画处理，这不是 Core Animation 特别擅长的。 （我可能对这里的细节有误，但它解释了行为）。

最简单的解决方法是将背景颜色设置为[UIColor clearColor]，并为您正在绘制的视图后面的背景颜色设置动画。这意味着不需要重新绘制视图，只需在“背景”上重新合成即可。

【讨论】：

有趣，我不知道。我确实实现了 -drawRect: 方法。让我试试你的建议并报告。

tc.，你是正确的！我按照你的建议做了，它有效。我将我的自定义视图设置为清晰，并在其后面添加了一个背景视图并将淡入淡出应用到该视图上，并且它可以工作。谢谢！

【参考方案3】：

我按原样尝试了您的代码。它工作得很好——它从我原来的视图中逐渐褪色为红色（然后又跳回白色，这是你所期望的）。因此，如果这对您不起作用，则说明发生了其他事情。

一个非常有用的诊断工具是提取您的麻烦代码并制作一个没有其他内容的项目。我做的就是你应该做的。创建一个全新的 Single View Application 项目。现在你有了一个视图控制器和它的视图。实现这个方法：

- (void)viewDidAppear:(BOOL)animated

    [super viewDidAppear:animated];
    CABasicAnimation* fade = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    fade.fromValue = (id)[UIColor whiteColor].CGColor;
    fade.toValue = (id)[UIColor redColor].CGColor;
    [fade setDuration:3];
    [self.view.layer addAnimation:fade forKey:@"fadeAnimation"];

运行项目。褪色效果很好。所以你看，任何问题都不在这段代码中！它在别的地方。也许您还有其他代码也在处理颜色 - 一个不同的动画正在破坏这个。也许某些参考不是指您认为的那样。也许有些东西覆盖了该层，所以您看不到它（子层）。谁知道？你没有展示你的整个项目（你也不应该）。重要的是向自己证明代码应该工作，这样你就可以找出真正错误的地方。我已经向你展示了如何做到这一点。

【讨论】：

谢谢马特。我在您的代码中看到您做了 [self.view.layer addAnimation:fade forKey:@"fadeAnimation"]; 但我正在尝试使用 在自定义 UIView 本身中执行图层动画[self.layer addAnimation:fade forKey:@"fadeAnimation"];.我会尝试更多的东西。