두 숫자 사이에 UILabel 텍스트를 애니메이션합니까?


80

저는 iPhone 및 Mac 프로그래밍 (이전에 Windows 용으로 개발 됨)을 처음 사용하는데 질문이 있습니다.

Ease-Out 스타일 에서 5 에서 80 까지와 같이 두 숫자 사이 의 text속성을 어떻게 애니메이션 합니까? 가능 합니까? Google에서 한 시간 동안 검색했지만 내 문제를 해결하는 것을 찾지 못했습니다. 내가 원하는 것 : 간단한 게임을 위해 사용자의 돈을 애니메이션합니다. 애니메이션없이 50 에서 100까지 또는 그와 비슷한 수준으로 가면별로 좋지 않습니다 .UILabelCoreAnimation

방법을 알고있는 사람이 있습니까?

감사!


2
이것은 오래된 질문이지만 Pop (Facebook 애니메이션 프레임 워크)이 좋은 해결책이 될 것입니다. 텍스트 속성을 직접 애니메이션 할 수 있습니다.
jrturton 2014 년

답변:


160

자동 전환을 사용할 수 있습니다. 완벽하게 잘 작동합니다.

// Add transition (must be called after myLabel has been displayed)
 CATransition *animation = [CATransition animation];
animation.duration = 1.0;
animation.type = kCATransitionFade;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[myLabel.layer addAnimation:animation forKey:@"changeTextTransition"];

// Change the text
myLabel.text = newText;

이 코드는 myLabel이 이미 표시된 경우 작동합니다. 그렇지 않으면 myLabel.layer가 nil이되고 애니메이션이 객체에 추가되지 않습니다.


스위프트 4 것이라고 :

let animation: CATransition = CATransition()
animation.duration = 1.0
animation.type = kCATransitionFade
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
myLabel.layer.add(animation, forKey: "changeTextTransition")

2
나는 이것을 시도했지만 (애니메이션이 추가 될 때 레이어가 nil이 아닌지 확인) 텍스트가 여전히 애니메이션되지 않습니다. 다른 문제가 있습니까?
elsurudo

5
참고로, 텍스트를 변경하고 페이드 효과가 발생하도록 할 때마다 텍스트를 변경하기 직전에 애니메이션을 추가해야합니다. 그러나 매번 새 전환을 인스턴스화 할 필요는 없으며 동일한 인스턴스를 반복해서 재사용 할 수 있습니다.
Lance

2
문제는 숫자에 애니메이션을 적용하는 방법이었습니다. 예를 들어 두 숫자 사이에 그래픽으로 희미 해지는 것이 아니라 값을 증가시키는 것입니다. 사용 PRTween : github.com/shu223/TweenDemo/tree/...
jowie

14
당신이 설정 한 경우 사실 removedOnCompletionNO의 인스턴스에 CATransition, 라벨의 모든 변경 사항은 text애니메이션됩니다.
Mark Adams

1
@kientux 키에는 특별한 것이 없습니다 changeTextTransition. 애니메이션을 식별하는 문자열 일뿐입니다 . 이는 나중에 이전에 추가 한 애니메이션을 식별하는 데 사용할 수있는 문자열임을 의미합니다. 나중에 애니메이션을 식별 할 필요가없는 경우 nil.
jamesk

27

잘 작동한다!

목표 -C

[UIView transitionWithView:self.label 
                  duration:.5f 
                   options:UIViewAnimationOptionCurveEaseInOut | 
                           UIViewAnimationOptionTransitionCrossDissolve 
                animations:^{

    self.label.text = rand() % 2 ? @"111!" : @"42";

} completion:nil];

스위프트 2

UIView.transitionWithView(label, duration: 0.25, options: [.CurveEaseInOut, .TransitionCrossDissolve], animations: {
    self.label.text = (arc4random() % 2 == 0) ? "111" : "222"
}, completion: nil)

스위프트 3, 4, 5

UIView.transition(with: label, duration: 0.25, options: [.curveEaseInOut, .transitionCrossDissolve], animations: {
    self.label.text = (arc4random() % 2 == 0) ? "111" : "222"
}, completion: nil)

1
이러한 변화와 같은 다른 속성에 대해서도 근무 imageUIImageView
SaltyNuts

7

PRTween 이라는 다양한 타이밍 함수로 값을 트위닝하는 훌륭한 엔진을 찾았 습니다 . 클래스를 설치하고 다음 줄을 따라 몇 가지 코드를 만듭니다.

- (IBAction)tweenValue
{
    [[PRTween sharedInstance] removeTweenOperation:activeTweenOperation];
    PRTweenPeriod *period = [PRTweenPeriod periodWithStartValue:0.0 endValue:100.0 duration:1.0];
    activeTweenOperation = [[PRTween sharedInstance] addTweenPeriod:period
                                                             target:self
                                                           selector:@selector(update:)
                                                     timingFunction:&PRTweenTimingFunctionCircOut];
}

- (void)update:(PRTweenPeriod*)period
{
    self.animatingView.center = CGPointMake(period.tweenedValue + 100.0, 200.0);
    self.valueLabel.text = [NSString stringWithFormat:@"%.2f", period.tweenedValue];
}

나를 위해 대접을 작동합니다. :)


5

이전 번호를 밀어내는 새 번호로 카운트 업 및 다운을 원하는 경우 (티커 등) :

let animation = CATransition()
animation.removedOnCompletion = true
animation.duration = 0.2
animation.type = kCATransitionPush
animation.subtype = newValue > value ? kCATransitionFromTop : kCATransitionFromBottom
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
valueLabel.layer.addAnimation(animation, forKey:"changeTextTransition")

야! 답변 해 주셔서 감사합니다! 이것은 꽤 깔끔하게 작동합니다. 더 이상 질문이 있습니다. 텍스트의 일부에만 애니메이션을 적용하는 방법을 알고 있습니까? 세 번째 캐릭터처럼 나머지는 그대로 두세요? 숫자를 표시하는 레이블을 구현하고 싶습니다. 값이 변경되면 숫자 만 애니메이션되며 실제로 변경됩니다.
Lars Petersen

개인적으로 저는 이런 종류의 작업에 CoreGraphics와 CoreAnimation을 사용하는 방법을 살펴볼 것입니다. 아니면 속임수를 쓰고 몇 개의 레이블을 묶을 수 있습니까? 문자열이 얼마나 복잡한 지에 따라 다릅니다.
Adam Waite

3

Swift 2.0에서는 다음 UIView.transitionWithView()방법을 사용합니다 .

UIView.transitionWithView(self.payPeriodSummaryLabel,
        duration: 0.2,
        options: [.CurveEaseInOut, .TransitionCrossDissolve],
        animations: { () -> Void in
            self.label.text = "your text value"
        }, completion: nil)

1

또 다른 간단한 대안

extension UILabel {    
    func countAnimation(upto: Double) {
        let from: Double = text?.replace(string: ",", replacement: ".").components(separatedBy: CharacterSet.init(charactersIn: "-0123456789.").inverted).first.flatMap { Double($0) } ?? 0.0
        let steps: Int = 20
        let duration = 0.350
        let rate = duration / Double(steps)
        let diff = upto - from
        for i in 0...steps {
            DispatchQueue.main.asyncAfter(deadline: .now() + rate * Double(i)) {
                self.text = "\(from + diff * (Double(i) / Double(steps)))"
            }
        }
    }
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.