如何为UILabel的背景色设置动画?


78

看起来应该可以,但不能。颜色立即变为绿色。

self.labelCorrection.backgroundColor = [UIColor whiteColor];
[UIView animateWithDuration:2.0 animations:^{
    self.labelCorrection.backgroundColor = [UIColor greenColor];
}];

2
对于以后的读者来说,这不是UILabel特有的,但要求是视图必须以背景色开始,即使该背景色是透明的也是如此。您无需在图层上设置动画,UIView.backgroundColor可以很好地进行上述操作。
克里斯·康诺夫

Answers:


147

我在任何地方都找不到文档,但是它的backgroundColor属性似乎UILabel不是可动画的,因为您的代码可以在vanilla上正常工作UIView。但是,只要您不设置标签视图本身的背景色,此hack似乎就可以起作用:

#import <QuartzCore/QuartzCore.h>

...

theLabel.layer.backgroundColor = [UIColor whiteColor].CGColor;

[UIView animateWithDuration:2.0 animations:^{
    theLabel.layer.backgroundColor = [UIColor greenColor].CGColor;
} completion:NULL];

这行得通,谢谢!我仍然想知道为什么UIView可以工作,而UILabel毕竟不能,UILabel是UIView。
Michiel de Mare 2010年

4
同意 在这一点上,我只能假设Apple选择将这些属性设为非动画UILabel。FWIW,UIButton其行为与标签相同。
bosmacs 2010年

2
奇怪的是,frame如果UILabel来自xib ,则至少该属性似乎也无法动画处理。如果它是通过程序创建的,它确实可以工作,但是...很奇怪。
朱利安D.11年

1
UITextField的行为类似,没有动画。
罗伯特·阿特金斯

1
我得到的是一个白色的背景,这在iOS 6
伊桑·米克

22

迅速

  1. 重要)将UILabel的背景颜色设置为清除(在IB或代码中)。例如:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        myLabel.backgroundColor = UIColor.clear
    }
    
  2. 设置图层背景色的动画。

    @IBAction func animateButtonTapped(sender: UIButton) {
    
        UIView.animate(withDuration: 1.0, animations: {
            self.myLabel.layer.backgroundColor = UIColor.red.cgColor
        })
    }
    

请注意,CGColor是在后面添加的UIColor

结果

在此处输入图片说明


9

迅捷3

要将标签背景颜色从白色变为绿色,请按以下步骤设置标签:

self.labelCorrection.backgroundColor = UIColor.clear
self.labelCorrection.layer.backgroundColor = UIColor.white.cgColor

像这样动画:

UIView.animate(withDuration: 2.0) { 
    self.labelCorrection.layer.backgroundColor = UIColor.green.cgColor
}

要回到原始状态,以便可以再次设置动画,请确保删除动画:

self.labelCorrection.layer.backgroundColor = UIColor.white.cgColor
self.labelCorrection.layer.removeAllAnimations()

7

您可以设置动画,但是出于某种原因,我必须首先(以编程方式)将其设置为clearColor。否则,动画要么不起作用,要么不可见。

我正在自定义表格单元中设置UILabel的背景色。这是willDisplayCell方法中的代码。我不会尝试在cellForRow中设置动画,因为很多布局都被表格修改了。

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
        ((RouteListCell *)cell).name.backgroundColor = [UIColor clearColor];
        [((RouteListCell *)cell).name backgroundGlowAnimationFromColor:[UIColor whiteColor] toColor:[UIColor redColor] clearAnimationsFirst:YES];
}

这是我的动画例程:

-(void) backgroundGlowAnimationFromColor:(UIColor *)startColor toColor:(UIColor *)destColor clearAnimationsFirst:(BOOL)reset;
{
    if (reset)
    {
        [self.layer removeAllAnimations];
    }

    CABasicAnimation *anAnimation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    anAnimation.duration = 1.00;
    anAnimation.repeatCount = HUGE_VAL;
    anAnimation.autoreverses = YES;
    anAnimation.fromValue = (id) startColor.CGColor; // [NSNumber numberWithFloat:1.0];
    anAnimation.toValue = (id) destColor.CGColor; //[NSNumber numberWithFloat:0.10];
    [self.layer addAnimation:anAnimation forKey:@"backgroundColor"];
}

2

基于NSTimer或CADisplayLink回调以某个合理的帧速率(例如20 fps)手动进行彩色动画。您将必须根据整个动画时间(在您的示例中为2.0秒)所经过的时间百分比来计算自己的RGB或HSV颜色变化曲线,或者使用40种中间颜色的数组。


2

请尝试一下

[UIView transitionWithView:yourView duration:0.2 options:UIViewAnimationOptionTransitionNone animations:^{

[yourView setBackgroundColor:[UIColor colorWithRed:0.8588 green:0.8588 blue:0.8588 alpha:1]];
    }completion:^(BOOL finished) {

 }];

这个对我有用。


2

最近,我再次遇到这个问题,经过研究后,我发现基本上没有任何变化(在可预见的将来可能不会发生变化),因此我最终使用了Facebook POP框架(不仅是)。

您可以轻松地在视图和图层上制作基本属性的动画,但是除此之外,它还可以在颜色之间(以及您想要的任何内容,甚至是您的自定义类型,加上一些额外的编码)提供平滑的过渡。因此,对于背景色,您可以执行以下操作:

   // Create spring animation (there are more types, if you want)
   let animation = POPSpringAnimation(propertyNamed: kPOPViewBackgroundColor)

   // Configure it properly
   animation.autoreverses = false
   animation.removedOnCompletion = true
   animation.fromValue = UIColor.yourBeginningColor()
   animation.toValue = UIColor.yourFinalColor()

   // Add new animation to your view - animation key can be whatever you like, serves as reference
   label.pop_addAnimation(animation, forKey: "YourAnimationKey")

中提琴,现在您可以为具有该属性的所有物体设置背景色动画!



1

如果您不想深入了解Quartz,请为每个答案中的一个答案,创建一个与UILabel大小相同的空UIView,并将其放置在与UILabel相同的位置(并在其下方按Z顺序),然​​后可以为UIView的背景色设置动画(我已经尝试过了,并且对我有用)。


1

Swift 4.1 UILabel扩展:

将此扩展添加到您的代码中:

extension UILabel {

    /** Animates the background color of a UILabel to a new color. */
    func animateBackgroundColor(to color : UIColor?, withDuration : TimeInterval, completion : ((Bool) -> Void)? = nil) {
        guard let newColor = color else { return }
        self.backgroundColor = .clear
        UIView.animate(withDuration: withDuration, animations: {
            self.layer.backgroundColor = newColor.cgColor
        }, completion: completion)
    }

}

您应该这样使用它:

myUILabel.animateBackgroundColor(to: .red, withDuration: 0.5)

现在,如果要恢复原始颜色,请按以下方式使用它:

// Storing the orignal color:
let originalColor = myUILabel.backgroundColor

// Changing the background color:
myUILabel.animateBackgroundColor(to: .red, withDuration: 0.5)

// ... Later:

// Restoring the original color:
myUILabel.animateBackgroundColor(to: originalColor, withDuration: 0.5, completion: {
    (value: Bool) in
    myUILabel.backgroundColor = originalColor
})

0

这里是参考:

animations包含要提交给视图的更改的块对象。您可以在此处以编程方式更改视图层次结构中视图的任何可设置动画的属性。该块不带参数,没有返回值。此参数不能为NULL

我对此的了解是,当您的视图调用动画块时,自那时以来,您的视图标签背景色被提交为绿色。然后,如果不将标签背景颜色更改为其他颜色,则它将始终为绿色。我就是这样

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.