【问题标题】:How to animate the background color of a UILabel?如何为 UILabel 的背景颜色设置动画?
【发布时间】:2011-04-15 07:44:29
【问题描述】:

这看起来应该有效,但没有。颜色立即变为绿色。

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

【问题讨论】:

  • 对于任何未来的读者来说,这不是特定于 UILabel,但要求是视图必须以背景颜色开头,即使该颜色是清晰的。您不需要在图层上设置动画,UIView.backgroundColor 工作正常,提供上述内容。

标签: ios iphone core-animation


【解决方案1】:

这是参考:

animations 一个块对象,包含 提交到视图的更改。 这是您以编程方式 更改任何动画属性 视图层次结构中的视图。这 块没有参数并且没有 返回值。该参数不得 为空

我对此的理解是,当您的视图调用动画块时,您的视图标签背景颜色从那时起就被承诺为绿色。然后,如果您不将标签背景颜色更改为其他颜色,则它将始终为绿色。这是我猜的

【讨论】:

    【解决方案2】:

    我无法在任何地方找到它的文档,但似乎UILabelbackgroundColor 属性不可动画化,因为您的代码可以正常使用香草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。
    • 同意。在这一点上,我只能假设 Apple 选择为 UILabel 设置非动画属性。 FWIW,UIButton 的行为方式与标签相同。
    • 奇怪的是,如果 UILabel 来自 xib,至少 frame 属性似乎也不是动画的。如果它是通过编程方式创建的,它确实可以工作,但是......很奇怪。
    • UITextFields 的行为类似——没有动画。
    • 在 iOS 6 上我得到的只是白色背景。
    【解决方案3】:

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

    【讨论】:

      【解决方案4】:

      【讨论】:

        【解决方案5】:

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

        【讨论】:

          【解决方案6】:

          您可以对其进行动画处理,但出于某种原因,我必须首先(以编程方式)将其设置为 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"];
          }
          

          【讨论】:

            【解决方案7】:

            请试试这个,

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

            它对我有用。

            【讨论】:

              【解决方案8】:

              我最近再次遇到了这个问题,经过一些研究后,我发现基本上没有任何变化(并且在可预见的将来可能不会),所以我最终使用 Facebook POP framework(不仅如此)。

              您可以轻松地在视图和图层上制作基本属性的动画,但此外,它还提供颜色之间的平滑过渡(基本上是您想要的任何颜色,甚至是您的自定义类型,还需要一些额外的编码)。所以对于背景颜色,你会做这样的事情:

                 // 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")
              

              Viola,现在您可以为具有该属性的所有内容设置背景颜色的动画!

              【讨论】:

                【解决方案9】:

                斯威夫特

                1. (important) 将 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之后添加的。

                结果

                【讨论】:

                  【解决方案10】:

                  斯威夫特 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()
                  

                  【讨论】:

                    【解决方案11】:

                    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
                    })
                    

                    【讨论】:

                      猜你喜欢
                      • 1970-01-01
                      • 2022-12-23
                      • 1970-01-01
                      • 2011-04-14
                      • 1970-01-01
                      • 1970-01-01
                      • 1970-01-01
                      • 2016-01-02
                      • 1970-01-01
                      相关资源
                      最近更新 更多