UILabel에서 애니메이션 텍스트 변경

새 텍스트 값을로 설정하고 UILabel있습니다. 현재 새 텍스트는 잘 나타납니다. 그러나 새 텍스트가 나타날 때 애니메이션을 추가하고 싶습니다. 새 텍스트의 모양에 애니메이션을 적용하기 위해 무엇을 할 수 있는지 궁금합니다.

그것이 작동하는지 궁금하고 완벽하게 작동합니다!

목표 -C

[UIView transitionWithView:self.label 
                  duration:0.25f 
                   options:UIViewAnimationOptionTransitionCrossDissolve 
                animations:^{

    self.label.text = rand() % 2 ? @"Nice nice!" : @"Well done!";

  } completion:nil];

스위프트 3, 4, 5

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

목표 -C

진정한 교차 디졸브 전환 ( 새 레이블 페이드 인 동안 이전 레이블 페이드 아웃) 을 달성하려면 페이드가 보이지 않게하고 싶지 않습니다. 그것은 초래 텍스트가 변경되지 않은 경우에도 원치 않는 깜박임 .

대신이 방법을 사용하십시오.

CATransition *animation = [CATransition animation];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.type = kCATransitionFade;
animation.duration = 0.75;
[aLabel.layer addAnimation:animation forKey:@"kCATransitionFade"];

// This will fade:
aLabel.text = "New"

참조 : 애니메이션 UILabel의 텍스트 두 숫자 사이?

iOS 10, 9, 8 시연

테스트 엑스 코드 8.2.1 및 7.1 , 오브젝티브 -c 에 8.0으로 아이폰 OS (10) .

► 전체 프로젝트를 다운로드하려면 Swift Recipes 에서 SO-3073520 을 검색하십시오 .

스위프트 4

UILabel (또는 그 문제에 대한 UIView)을 페이드하는 올바른 방법은을 사용하는 것 Core Animation Transition입니다. 내용이 바뀌지 않으면 깜박 거리지 않으며 검은 색으로 사라지지 않습니다.

휴대 가능하고 깨끗한 솔루션은 ExtensionSwift에서 사용하는 것 입니다 (표시 요소를 변경하기 전에 호출)

// Usage: insert view.fadeTransition right before changing content


extension UIView {
    func fadeTransition(_ duration:CFTimeInterval) {
        let animation = CATransition()
        animation.timingFunction = CAMediaTimingFunction(name:
            CAMediaTimingFunctionName.easeInEaseOut)
        animation.type = CATransitionType.fade
        animation.duration = duration
        layer.add(animation, forKey: CATransitionType.fade.rawValue)
    }
}

호출은 다음과 같습니다 :

// This will fade
aLabel.fadeTransition(0.4)
aLabel.text = "text"

► GitHub 에서이 솔루션을 찾고 스위프트 레시피 에 대한 추가 세부 사항을 찾으십시오 .

iOS4부터 블록으로 분명히 할 수 있습니다.

[UIView animateWithDuration:1.0
                 animations:^{
                     label.alpha = 0.0f;
                     label.text = newText;
                     label.alpha = 1.0f;
                 }];

이 작업을 수행하는 코드는 다음과 같습니다.

[UIView beginAnimations:@"animateText" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:1.0f];
[self.lbl setAlpha:0];
[self.lbl setText:@"New Text";
[self.lbl setAlpha:1];
[UIView commitAnimations];

UILabel 확장 솔루션

extension UILabel{

  func animation(typing value:String,duration: Double){
    let characters = value.map { $0 }
    var index = 0
    Timer.scheduledTimer(withTimeInterval: duration, repeats: true, block: { [weak self] timer in
        if index < value.count {
            let char = characters[index]
            self?.text! += "\(char)"
            index += 1
        } else {
            timer.invalidate()
        }
    })
  }


  func textWithAnimation(text:String,duration:CFTimeInterval){
    fadeTransition(duration)
    self.text = text
  }

  //followed from @Chris and @winnie-ru
  func fadeTransition(_ duration:CFTimeInterval) {
    let animation = CATransition()
    animation.timingFunction = CAMediaTimingFunction(name:
        CAMediaTimingFunctionName.easeInEaseOut)
    animation.type = CATransitionType.fade
    animation.duration = duration
    layer.add(animation, forKey: CATransitionType.fade.rawValue)
  }

}

에 의해 간단히 호출 된 기능

uiLabel.textWithAnimation(text: "text you want to replace", duration: 0.2)

모든 팁을 주셔서 감사합니다. 이것이 장기적으로 도움이되기를 바랍니다.

위의 SwiftArchitect 솔루션의 Swift 4.2 버전은 훌륭합니다.

    // Usage: insert view.fadeTransition right before changing content    

extension UIView {

        func fadeTransition(_ duration:CFTimeInterval) {
            let animation = CATransition()
            animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
            animation.type = CATransitionType.fade
            animation.duration = duration
            layer.add(animation, forKey: CATransitionType.fade.rawValue)
        }
    }

기도:

    // This will fade

aLabel.fadeTransition(0.4)
aLabel.text = "text"

스위프트 2.0 :

UIView.transitionWithView(self.view, duration: 1.0, options: UIViewAnimationOptions.TransitionCrossDissolve, animations: {
    self.sampleLabel.text = "Animation Fade1"
    }, completion: { (finished: Bool) -> () in
        self.sampleLabel.text = "Animation Fade - 34"
})

또는

UIView.animateWithDuration(0.2, animations: {
    self.sampleLabel.alpha = 1
}, completion: {
    (value: Bool) in
    self.sampleLabel.alpha = 0.2
})

Swift 5를 사용하면 UILabel교차 디졸브 애니메이션으로 텍스트 변경 사항 에 애니메이션을 적용하기 위해 다음 두 가지 놀이터 코드 샘플 중 하나를 선택할 수 있습니다 .

#1. 사용 UIView의 transition(with:duration:options:animations:completion:)클래스 메소드

import UIKit
import PlaygroundSupport

class ViewController: UIViewController {

    let label = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()

        label.text = "Car"

        view.backgroundColor = .white
        view.addSubview(label)

        label.translatesAutoresizingMaskIntoConstraints = false
        label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(toggle(_:)))
        view.addGestureRecognizer(tapGesture)
    }

    @objc func toggle(_ sender: UITapGestureRecognizer) {
        let animation = {
            self.label.text = self.label.text == "Car" ? "Plane" : "Car"
        }
        UIView.transition(with: label, duration: 2, options: .transitionCrossDissolve, animations: animation, completion: nil)
    }

}

let controller = ViewController()
PlaygroundPage.current.liveView = controller

# 2. 사용 CATransition및 CALayer의 add(_:forKey:)방법을

import UIKit
import PlaygroundSupport

class ViewController: UIViewController {

    let label = UILabel()
    let animation = CATransition()

    override func viewDidLoad() {
        super.viewDidLoad()

        label.text = "Car"

        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
        // animation.type = CATransitionType.fade // default is fade
        animation.duration = 2

        view.backgroundColor = .white
        view.addSubview(label)

        label.translatesAutoresizingMaskIntoConstraints = false
        label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(toggle(_:)))
        view.addGestureRecognizer(tapGesture)
    }

    @objc func toggle(_ sender: UITapGestureRecognizer) {
        label.layer.add(animation, forKey: nil) // The special key kCATransition is automatically used for transition animations
        label.text = label.text == "Car" ? "Plane" : "Car"
    }

}

let controller = ViewController()
PlaygroundPage.current.liveView = controller

Swift 4.2 솔루션 (4.0 답변 및 컴파일 할 새 열거 형 업데이트)

extension UIView {
    func fadeTransition(_ duration:CFTimeInterval) {
        let animation = CATransition()
        animation.timingFunction = CAMediaTimingFunction(name:
            CAMediaTimingFunctionName.easeInEaseOut)
        animation.type = CATransitionType.fade
        animation.duration = duration
        layer.add(animation, forKey: CATransitionType.fade.rawValue)
    }
}

func updateLabel() {
myLabel.fadeTransition(0.4)
myLabel.text = "Hello World"
}

애니메이션의 일관성을 위해 시스템 기본값 0.25 duration및 .curveEaseInEaseOut timingFunction이 선호되는 경우가 많으므로 생략 할 수 있습니다.

let animation = CATransition()
label.layer.add(animation, forKey: nil)
label.text = "New text"

이것은 이것을 쓰는 것과 같습니다 :

let animation = CATransition()
animation.duration = 0.25
animation.timingFunction = .curveEaseInEaseOut
label.layer.add(animation, forKey: nil)
label.text = "New text"

@SwiftArchitect의 코드를 기반으로하는 C # UIView 확장 방법입니다. 자동 레이아웃이 포함되고 레이블 텍스트에 따라 컨트롤을 이동해야하는 경우이 호출 코드는 레이블 자체 대신 전환보기로 레이블의 Superview를 사용합니다. 더 캡슐화되도록 작업에 대한 람다 식을 추가했습니다.

public static void FadeTransition( this UIView AView, double ADuration, Action AAction )
{
  CATransition transition = new CATransition();

  transition.Duration = ADuration;
  transition.TimingFunction = CAMediaTimingFunction.FromName( CAMediaTimingFunction.Linear );
  transition.Type = CATransition.TransitionFade;

  AView.Layer.AddAnimation( transition, transition.Type );
  AAction();
}

전화 코드 :

  labelSuperview.FadeTransition( 0.5d, () =>
  {
    if ( condition )
      label.Text = "Value 1";
    else
      label.Text = "Value 2";
  } );

Swift지연과 함께이 작업을 수행하려면 다음을 시도하십시오.

delay(1.0) {
        UIView.transitionWithView(self.introLabel, duration: 0.25, options: [.TransitionCrossDissolve], animations: {
            self.yourLabel.text = "2"
            }, completion:  { finished in

                self.delay(1.0) {
                    UIView.transitionWithView(self.introLabel, duration: 0.25, options: [.TransitionCrossDissolve], animations: {
                        self.yourLabel.text = "1"
                        }, completion:  { finished in

                    })
                }

        })
    }

@matt- https : //stackoverflow.com/a/24318861/1982051에 의해 생성 된 다음 기능 사용 :

func delay(delay:Double, closure:()->()) {
    dispatch_after(
        dispatch_time(
            DISPATCH_TIME_NOW,
            Int64(delay * Double(NSEC_PER_SEC))
        ),
        dispatch_get_main_queue(), closure)
}

스위프트 3에서 이것이 될 것입니다

func delay(_ delay:Double, closure:()->()) {
    let when = DispatchTime.now() + delay
    DispatchQueue.main.after(when: when, execute: closure)
}

이를 달성하기위한 또 하나의 솔루션이 있습니다. 여기에 설명되어 있습니다 . 아이디어는 다음과 같은 방식으로 함수를 서브 클래 싱 UILabel하고 재정의 action(for:forKey:)합니다.

class LabelWithAnimatedText: UILabel {
    override var text: String? {
        didSet {
            self.layer.setValue(self.text, forKey: "text")
        }
    }

    override func action(for layer: CALayer, forKey event: String) -> CAAction? {
        if event == "text" {
            if let action = self.action(for: layer, forKey: "backgroundColor") as? CAAnimation {
                let transition = CATransition()
                transition.type = kCATransitionFade

                //CAMediatiming attributes
                transition.beginTime = action.beginTime
                transition.duration = action.duration
                transition.speed = action.speed
                transition.timeOffset = action.timeOffset
                transition.repeatCount = action.repeatCount
                transition.repeatDuration = action.repeatDuration
                transition.autoreverses = action.autoreverses
                transition.fillMode = action.fillMode

                //CAAnimation attributes
                transition.timingFunction = action.timingFunction
                transition.delegate = action.delegate

                return transition
            }
        }
        return super.action(for: layer, forKey: event)
    }
}

사용 예 :

// do not forget to set the "Custom Class" IB-property to "LabelWithAnimatedText"
// @IBOutlet weak var myLabel: LabelWithAnimatedText!
// ...

UIView.animate(withDuration: 0.5) {
    myLabel.text = "I am animated!"
}

myLabel.text = "I am not animated!"