Wie animiere ich die Hintergrundfarbe eines UILabels?


79

Das sieht so aus, als sollte es funktionieren, tut es aber nicht. Die Farbe wird sofort grün.

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

2
Für zukünftige Leser ist dies nicht spezifisch für UILabel. Voraussetzung ist jedoch, dass eine Ansicht mit einer Hintergrundfarbe beginnt, auch wenn diese Farbe klar ist. Sie müssen auf der Ebene nicht animieren, die UIView.backgroundColor funktioniert einwandfrei, sofern oben angegeben.
Chris Conover

Antworten:


149

Ich kann es nirgendwo dokumentiert finden, aber es scheint, dass die backgroundColorEigenschaft von UILabelnicht animierbar ist, da Ihr Code mit einer Vanille gut funktioniert UIView. Dieser Hack scheint jedoch zu funktionieren, solange Sie die Hintergrundfarbe der Etikettenansicht selbst nicht festlegen:

#import <QuartzCore/QuartzCore.h>

...

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

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

Das funktioniert, danke! Ich würde immer noch gerne wissen, warum ein UIView funktioniert und ein UILabel schließlich kein UILabel ist.
Michiel de Mare

4
Einverstanden. Ich kann an dieser Stelle nur davon ausgehen, dass Apple diese Eigenschaften nicht animiert hat UILabel. FWIW UIButtonverhält sich genauso wie das Etikett.
Bosmacs

2
Seltsamerweise framescheint zumindest die Eigenschaft auch nicht animierbar zu sein, wenn sie UILabelvon einem xib stammt. Es funktioniert, wenn es programmgesteuert erstellt wird, obwohl ... seltsam.
Julian D.

1
UITextFields verhalten sich ähnlich - keine Animation.
Robert Atkins

1
Alles was ich bekomme ist ein weißer Hintergrund mit diesem auf iOS 6.
Ethan Mick

22

Schnell

  1. ( wichtig ) Stellen Sie die Hintergrundfarbe des UILabels auf klar (entweder in IB oder im Code). Zum Beispiel:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        myLabel.backgroundColor = UIColor.clear
    }
    
  2. Animieren Sie die Hintergrundfarbe der Ebene.

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

Beachten Sie, dass CGColornach dem hinzugefügt wird UIColor.

Ergebnis

Geben Sie hier die Bildbeschreibung ein


9

Swift 3

Richten Sie Ihr Etikett wie folgt ein, um die Hintergrundfarbe Ihres Etiketts von Weiß nach Grün zu animieren:

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

Animieren Sie so:

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

Um zum ursprünglichen Zustand zurückzukehren und erneut zu animieren, müssen Sie die Animationen entfernen:

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

7

Sie KÖNNEN es animieren, aber ich musste es aus irgendeinem Grund zuerst (programmgesteuert) auf clearColor einstellen. Ohne das funktionierte die Animation entweder nicht oder war nicht sichtbar.

Ich animiere die Hintergrundfarbe eines UILabels in einer benutzerdefinierten Tabellenzelle. Hier ist der Code in der willDisplayCell-Methode. Ich würde nicht versuchen, die Animation in cellForRow festzulegen, da ein Großteil des Layouts von der Tabelle bearbeitet wird.

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

Hier ist meine Animationsroutine:

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

Führen Sie die Farbanimation manuell aus, basierend auf einem NSTimer- oder CADisplayLink-Rückruf mit einer angemessenen Bildrate (z. B. 20 fps). Sie müssen Ihre eigene Farbänderungskurve in RGB oder HSV basierend auf der gebrochenen verstrichenen Zeit über die gesamte Animationszeit (in Ihrem Beispiel 2,0 Sekunden) berechnen oder ein Array von 40 Zwischenfarben verwenden.


2

Bitte versuchen Sie dies,

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

 }];

Für mich geht das.


2

Vor kurzem bin ich erneut auf dieses Problem gestoßen, und nach einigen Recherchen stellte ich fest, dass sich im Grunde nichts geändert hat (und wahrscheinlich in absehbarer Zukunft nicht), sodass ich schließlich das Facebook- POP-Framework verwendete (nicht nur) das dafür verwendete.

Sie können problemlos Animationen grundlegender Eigenschaften sowohl in der Ansicht als auch in der Ebene erstellen. Darüber hinaus bietet es einen reibungslosen Übergang zwischen den Farben (und im Grunde alles, was Sie möchten, auch Ihre benutzerdefinierten Typen, mit zusätzlicher Codierung). Für die Hintergrundfarbe würden Sie also Folgendes tun:

   // 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, jetzt können Sie Hintergrundfarben für alles animieren, was diese Eigenschaft hat!



1

Wenn Sie nicht in Quarz eintauchen möchten, erstellen Sie pro Antwort eine der vorherigen Antworten. Erstellen Sie eine leere UIView mit der gleichen Größe wie UILabel und positionieren Sie sie an derselben Stelle wie die UILabel (und in Z-Reihenfolge darunter) animieren Sie die Hintergrundfarbe von UIView (ich habe dies versucht und es funktioniert für mich).


1

Swift 4.1 UILabel-Erweiterung:

Fügen Sie diese Erweiterung Ihrem Code hinzu:

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

}

Sie sollten es so verwenden:

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

Wenn Sie nun die ursprüngliche Farbe wiederherstellen möchten, verwenden Sie sie wie folgt:

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

Hier ist die Referenz:

Animationen Ein Blockobjekt, das die Änderungen enthält, die in die Ansichten übernommen werden sollen. Hier ändern Sie programmgesteuert alle animierbaren Eigenschaften der Ansichten in Ihrer Ansichtshierarchie. Dieser Block akzeptiert keine Parameter und hat keinen Rückgabewert. Dieser Parameter darf nicht NULL sein

Was ich darüber verstehe, ist, wenn Ihre Ansicht den Animationsblock aufruft und die Hintergrundfarbe Ihrer Ansichtsbeschriftung seitdem grün ist. Wenn Sie dann die Hintergrundfarbe des Etiketts nicht in etwas anderes ändern, ist es immer grün. Das denke ich

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.