Як анімувати колір фону UILabel?


79

Здається, це має спрацювати, але ні. Колір відразу стає зеленим.

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

2
Для будь-яких майбутніх читачів це не характерно для UILabel, але вимога полягає в тому, що подання має починатися з кольору тла, навіть якщо цей колір чіткий. Вам не потрібно анімувати на шарі, UIView.backgroundColor відмінно працює, за умови вищезазначеного.
Chris Conover

Відповіді:


149

Я не можу знайти це ніде задокументовано, але, схоже, backgroundColorвластивість UILabelне є анімаційним, оскільки ваш код чудово працює з ваніллю UIView. Однак цей злом працює, доки ви не встановите колір тла для самого подання етикетки:

#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

4
Домовились. На даний момент я можу лише припустити, що Apple вирішила зробити ці властивості не анімованими UILabel. FWIW, UIButtonповодиться так само, як етикетка.
bosmacs

2
Як не дивно, принаймні frameвластивість, здається, теж не анімаційна, якщо UILabelпоходить від xib. Це працює, якщо створюється програмно, хоча ... дивно.
Джуліан Д.

1
UITextFields поводяться подібним чином - без анімації.
Роберт Аткінс,

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 кадрів в секунду). Вам доведеться розрахувати власну криву зміни кольору в RGB або HSV на основі дробового часу, що минув за весь час анімації (2,0 секунди у вашому прикладі), або використовувати масив із 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 (не тільки).

Ви можете легко робити анімацію основних властивостей як у вигляді, так і на шарі, але крім того, це забезпечує плавний перехід між кольорами (і в основному все, що завгодно, навіть ваші власні типи, з деяким додатковим кодуванням). Отже, для кольору фону ви зробите щось подібне:

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

Якщо ви не хочете занурюватись у кварц, на кожну відповідь одну з попередніх відповідей створіть порожній UIView такого ж розміру, як UILabel, і розташуйте його там же, де 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

Ось посилання:

анімація Блоковий об'єкт, що містить зміни для фіксації подань. Тут ви програмно змінюєте будь-які анімаційні властивості подань у вашій ієрархії подань. Цей блок не приймає параметрів і не має поверненого значення. Цей параметр не повинен мати значення NULL

Що я розумію з цього приводу, коли ваш вигляд викликає блок анімації, тоді ваш колір тла мітки перегляду визначений зеленим з того часу. Тоді, якщо ви не зміните колір тла етикетки на щось інше, він завжди буде зеленим. Це те, що я здогадуюсь

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.