[iOS] UIView.animate를 활용한 애니메이션 처리

 어떤 버튼을 클릭했을 때 특정 라벨은 숨기고 특정 라벨은 나타나게 처리할 때 isHidden 속성을 사용하여 처리할 수 있다. isHidden을 사용하여 처리하면 다음과 같이 나타난다. 

isHidden을 사용한 처리

 전체적인 코드는 다음과 같다.

enum buttonStatus {
    case prev
    case next
}

class ViewController: UIViewController {
    @IBOutlet weak var beforeLabel: UILabel!
    @IBOutlet weak var afterLabel: UILabel!
    
    @IBOutlet weak var clickButton: UIButton!
    
    var status: buttonStatus = .prev
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.configureButton()
    }
    
    private func configureButton() {
        self.clickButton.setTitle("다음으로 이동", for: .normal)
        self.clickButton.setTitle("이전으로 이동", for: .selected)
    }

    @IBAction func tapClickButton(_ sender: UIButton) {
        
        switch status {
        case .prev:
            self.beforeLabel.isHidden = true
            self.afterLabel.isHidden = false
            self.clickButton.isSelected = true
            self.status = .next
        case .next:
            self.beforeLabel.isHidden = false
            self.afterLabel.isHidden = true
            self.clickButton.isSelected = false
            self.status = .prev
        }
        
    }
    
}

 

 현재 상태에 따라서 라벨의 isHidden 값을 바꿔서 나타나거나 숨겨지도록 설정했다. 하지만 조금은 딱딱하다는 느낌을 받을 수 있다. 조금 부드럽게 나타남/숨김 처리를 하려면 어떻게 해야 할까?

 

 

UIView.animate를 활용한 애니메이션 처리 

 animate의 특징은 다음과 같다. 

• Closure 기반
• 애니메이션이 동작하는 동안 user interaction은 일시적으로 disabled
• 애니메이션 가능한 속성 
  -> frame, bounds, center, transform, alpha, backgroundColor

 

 animate는 다양한 형태를 가지고 있지만 이번 포스트에서는 다음과 같은 형태의 animate 메서드를 사용할것이다.

class func animate(withDuration duration: TimeInterval, 
        animations: @escaping () -> Void)

 

[duration]

 초 단위로 측정된 애니메이션의 총 지속 시간이다. 음수 값이나 0을 지정하면 애니메이션 없이 변경된다.

 

[animations]

 뷰에 커밋할 변경 사항이 포함된 블록 객체이다. 뷰의 애니메이션 가능한 속성을 프로그래밍 방식으로 변경할 수 있다. 

 

 위의 예제를 animate를 사용하여 부드럽게 전환되도록 수정해보자. 이를 위해 라벨의 alpha값을 이용해야한다. 수정된 코드는 다음과 같다. 

    @IBAction func tapClickButton(_ sender: UIButton) {
        
        switch status {
        case .prev:
            UIView.animate(withDuration: 0.5) {
                self.beforeLabel.alpha = 0
                self.afterLabel.alpha = 1
            }
            self.clickButton.isSelected = true
            self.status = .next
        case .next:
            UIView.animate(withDuration: 0.5) {
                self.beforeLabel.alpha = 1
                self.afterLabel.alpha = 0
            }
            self.clickButton.isSelected = false
            self.status = .prev
        }
        
    }

 

 duration으로 0.5를 줬는데 이는 0.5초동안 라벨의 alpha 값을 beforeLabel의 경우 1에서 0으로, afterLabel의 경우 0에서 1로 변경하라는 의미이다. 실행하면 다음과 같이 부드럽게 전환되는 것을 확인할 수 있다.

 

animate를 사용한 처리

 

 

 

 

※ 주의

 애플 공식문서에는 위와 같이 사용을 지양하고 UIViewPropertyAnimator를 대신 사용하라고 나와있다. 추후에 deprecated 될 수도 있을 것 같다.

 

REFERENCES

- https://developer.apple.com/documentation/uikit/uiview/1622418-animate

- https://jinnify.tistory.com/66