[UIKit] UIView.AnimationOptions

UIView.animate

지정된 지속 시간을 사용하여 하나 이상의 뷰에 대한 변경 사항을 애니메이션으로 표시

UIView.animate(
    withDuration: TimeInterval,  // 애니메이션 지속 시간 (초)
    delay: TimeInterval,         // 시작 전 대기 시간
    options: UIView.AnimationOptions, // 애니메이션 스타일 및 동작 옵션
    animations: { 
        // 변화시킬 코드 (위치, 크기, 배경색, 투명도 등)
    }, 
    completion: { finished in
        // 애니메이션이 끝난 후 실행될 코드
    }
)

 

이 메서드는 Main Thread에서 실행되어야 한다. 또한 만약 Auto Layout(제약 조건)을 사용 중이라면 transform 대신 제약 조건 변수를 수정하고 layoutIfNeeded() 를 애니메이션 메서드 안에 포함 시켜한다.

---

UIView.AnimationOptions

위 함수에서 사용하기 위한 애니메이션 스타일 및 동작 옵션으로, OptionSet 타입이며 여러 개를 [.option1, .option2] 형식으로 사용한다.

 

Timing Curve(속도 변화)

애니메이션이 시간에 따라 어떻게 움직일 지 결정

• .curveEaseInOut(default) : 천천히 시작 → 중간에 빨라짐 → 천천히 종료
• .curveEaseIn : 천천히 시작 → 끝날 때까지 점점 빨라짐
• .curveEaseOut : 빠르게 시작 → 끝날 때 점점 천천히 종료
• .curveLinear : 처음부터 끝까지 일정한 속도

Repeat and Control(행동)

• .repeat : 애니메이션을 무한히 반복, 이 속성을 사용하게 되면 completion이 작동하지 않음
• .autoreverse : 끝 지점에 도달하면 다시 시작 시점으로 되돌아옴 (보통 .repeat와 함께 사용)
• .beginFromCurrentState : 이전 애니메이션이 진행 중일 때, 그 지점부터 새 애니메이션을 시작

Interaction

• .allowUserInteraction : 애니메이션이 동작하는 동안 뷰에 대한 터치 입력을 허용(기본적으로는 차단됨)

---

애니메이션 가능한 주요 속성

• frame / bounds : 위치와 크기
• center : 뷰의 중심 위치
• transform : 회전, 크기 조절 및 이동 (CGAffineTransform) 
• alpha : 투명도
• backgroundColor : 배경색
• ContentStretch : 영역 늘리기

---

layoutIfNeeded

Auto Layout 환경에서는 뷰의 frame이나 center를 직접 수정해도 애니메이션이 의도대로 작동하지 않을 때가 많다. 왜냐하면 레이아웃 엔진이 제약 조건(Constraints)을 바탕으로 뷰의 위치를 계속 강제로 고정시키려 하기 때문이다. 따라서 Auto Layout 애니메이션은 "제약 조건을 수정하고, 바뀐 레이아웃을 다시 그려라"는 방식으로 접근해야 한다. 아래 예시 코드를 참고

view를 터치하면 view가 이동하는 간단한 애니메이션 코드를 구현하였다. 여기서 constraint가 변경되고 layoutIfNeed()를 호출해야 변사항이 반영된다.

import UIKit

class RootViewController: UIViewController {
    private let movingBox: UIView = {
        let view = UIView()
        view.backgroundColor = .systemYellow
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    // 1. 변화를 줄 제약 조건을 변수로 선언 (나중에 수정하기 위함)
    private var centerYConstraint: NSLayoutConstraint?
    private var isMoved = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(movingBox)
        
        // 초기 레이아웃 설정
        movingBox.widthAnchor.constraint(equalToConstant: 100).isActive = true
        movingBox.heightAnchor.constraint(equalToConstant: 100).isActive = true
        movingBox.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        
        // 수정할 제약 조건을 변수에 할당
        centerYConstraint = movingBox.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        centerYConstraint?.isActive = true
        
        // 터치 시 애니메이션 실행을 위해 탭 제스처 추가
        let tap = UITapGestureRecognizer(target: self, action: #selector(handleTap))
        view.addGestureRecognizer(tap)
    }
    
    @objc func handleTap() {
        // 2. 애니메이션 목표값 설정 (제약 조건의 constant 변경)
        if isMoved {
            centerYConstraint?.constant = 0       // 원래 위치 (중앙)
        } else {
            centerYConstraint?.constant = -200    // 위로 200만큼 이동
        }
        isMoved.toggle()
        
        // 3. 실제 애니메이션 적용
        // layoutIfNeeded()는 "지금 즉시 레이아웃을 갱신해!"라는 명령입니다.
        // 이 명령이 animate 블록 안에 있으면, 변화 과정이 애니메이션으로 보입니다.
        UIView.animate(withDuration: 0.5, delay: 0, options: .curveEaseOut, animations: {
            self.view.layoutIfNeeded()
        }, completion: nil)
    }
}

---

참고

animate(withDuration:animations:) | Apple Developer Documentation

 

UIView.AnimationOptions | Apple Developer Documentation

 

layoutIfNeeded() | Apple Developer Documentation