web-dev-qa-db-fra.com

Comment animer la couleur de fond d'un UILabel?

Cela semble fonctionner, mais ça ne fonctionne pas. La couleur devient verte à la fois.

self.labelCorrection.backgroundColor = [UIColor whiteColor];
[UIView animateWithDuration:2.0 animations:^{
    self.labelCorrection.backgroundColor = [UIColor greenColor];
}];
iosiphonecore-animation
71
Michiel de Mare

Je ne peux pas le trouver documenté nulle part, mais il semble que la propriété backgroundColor de UILabel ne puisse pas être animée, car votre code fonctionne correctement avec une variable Vanilla UIView. Ce hack semble fonctionner, cependant, tant que vous ne définissez pas la couleur d'arrière-plan de la vue étiquette elle-même:

#import <QuartzCore/QuartzCore.h>

...

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

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

Rapide

  1. (important) Définissez la couleur d'arrière-plan de UILabel pour la supprimer (dans IB ou dans le code). Par exemple:

    override func viewDidLoad() {
    super.viewDidLoad()

    myLabel.backgroundColor = UIColor.clear
}

  2. Animer la couleur de fond du calque.

    @IBAction func animateButtonTapped(sender: UIButton) {

    UIView.animate(withDuration: 1.0, animations: {
        self.myLabel.layer.backgroundColor = UIColor.red.cgColor
    })
}

Notez que CGColor est ajouté après la UIColor.

Résultat

 enter image description here

16
Suragch

Vous POUVEZ l'animer, mais je devais d'abord le définir (par programme) sur clearColor pour une raison quelconque. Sans cela, l'animation ne fonctionnait pas ou n'était pas visible.

J'anime la couleur de fond d'un UILabel dans une cellule de tableau personnalisée. Voici le code de la méthode willDisplayCell. Je n'essaierais pas de définir l'animation dans cellForRow, car beaucoup de mises en page sont modifiées par la table.

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

Voici ma routine d'animation:

-(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
software evolved

Swift 3

Pour animer la couleur d'arrière-plan de votre étiquette du blanc au vert, configurez-la comme suit:

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

Animer comme ça:

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

Pour revenir à l'état d'origine afin de pouvoir animer à nouveau, assurez-vous de supprimer les animations:

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

J'ai récemment rencontré ce problème une fois de plus et, après quelques recherches, je me suis dit que fondamentalement, rien n'avait changé (et ne le ferait probablement pas dans un avenir prévisible). J'ai donc utilisé Facebook POP framework (pas seulement) pour cela. 

Vous pouvez facilement créer des animations de propriétés de base sur la vue et le calque, mais cela permet également une transition en douceur entre les couleurs (et essentiellement ce que vous voulez, même vos types personnalisés, avec un codage supplémentaire). Donc, pour la couleur de fond, vous feriez quelque chose comme ceci:

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

Alto, maintenant vous pouvez animer les couleurs de fond sur tout ce qui a cette propriété!

2
Jiri Trecak

Créez l’animation couleur manuellement, à partir d’un rappel NSTimer ou CADisplayLink à une cadence raisonnable (par exemple, 20 ips). Vous devrez calculer votre propre courbe de changement de couleur en RVB ou en HSV en fonction du temps écoulé fractionnaire sur toute la durée de l'animation (2,0 secondes dans votre exemple) ou utiliser un tableau de 40 couleurs intermédiaires.

2
hotpaw2

S'il vous plaît essayez ceci,

[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) {

 }];

Ça marche pour moi.

2
Techie

il est dit dans la documentation que backgroundColor est animable

http://developer.Apple.com/library/ios/#documentation/uikit/reference/UIView_Class/UIView/UIView.html#//Apple_ref/doc/uid/TP40006816-CH3-SW131

Je ne sais pas vraiment depuis quand.

1
hfossli

Si vous ne voulez pas vous plonger dans Quartz, créez une UIView vide de même taille que UILabel, puis placez-la au même endroit que UILabel (et dans l'ordre Z, sous celui-ci). animer la couleur d’arrière-plan de cette UIView (j’ai essayé cela et cela fonctionne pour moi).

1
DavidN

Swift 4.1 UILabel Extension:

Ajoutez cette extension à votre code:

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

}

Vous devriez l'utiliser comme ça:

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

Maintenant, si vous voulez restaurer la couleur d'origine, utilisez-la comme ceci:

// 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
ThiagoAM

Voici la référence:

animations Un objet de bloc contenant les modifications à appliquer aux vues . C'est là que vous programmez changer les propriétés animables de les vues dans votre hiérarchie de vues. Ce block ne prend aucun paramètre et n'a pas de valeur de retour. Ce paramètre ne doit pas être nul

Ce que je comprends de cela, c’est lorsque votre vue appelle le bloc d’animation, la couleur d’arrière-plan de l’étiquette de la vue est alors verte. Ensuite, si vous ne changez pas la couleur d'arrière-plan de l'étiquette en autre chose, elle sera toujours verte. C'est ce que je suppose

0
vodkhang