UILabel의 배경색에 애니메이션을 적용하는 방법은 무엇입니까?


79

작동하는 것처럼 보이지만 작동하지 않습니다. 색상이 즉시 녹색으로 바뀝니다.

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

2
미래의 독자를 위해 이것은 UILabel에 국한되지 않지만 요구 사항은 해당 색상이 명확하더라도 뷰가 배경 색상으로 시작해야한다는 것입니다. 위의 경우 레이어에서 애니메이션을 적용 할 필요가 없으며 UIView.backgroundColor가 제대로 작동합니다.
Chris Conover

답변:


149

어디서나 문서화 된 것을 찾을 수 는 없지만 코드가 vanilla에서 잘 작동하기 때문에 의 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
이상하게도 xib frame에서 UILabel가져온 속성은 애니메이션화 할 수없는 것 같습니다 . 그래도 프로그래밍 방식으로 생성되면 작동합니다. 이상합니다.
Julian D.

1
UITextFields는 애니메이션없이 비슷하게 작동합니다.
Robert Atkins

1
모든 I get 및은 아이폰 OS 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

합리적인 프레임 속도 (예 : 20fps)에서 NSTimer 또는 CADisplayLink 콜백을 기반으로 수동으로 색상 애니메이션을 수행합니다. 전체 애니메이션 시간 (예 : 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")

Viola, 이제 해당 속성을 가진 모든 것에 배경색을 애니메이션 할 수 있습니다!



1

Quartz에 빠지지 않으려면 이전 답변 중 하나에 대해 UILabel과 동일한 크기의 빈 UIView를 만들고 UILabel과 동일한 위치에 배치하면 다음을 수행 할 수 있습니다. 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이 아니어야합니다.

내가 이해하는 것은 뷰가 애니메이션 블록을 호출 할 때 그 이후로 뷰 레이블 배경색이 녹색으로 커밋된다는 것입니다. 그런 다음 레이블 배경색을 다른 것으로 변경하지 않으면 항상 녹색이됩니다. 이것은 내가 추측하는 것입니다

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.