UIView.transition
개요
UIView.transition: iOS에서 애니메이션 전환을 간단하게 처리하는 방법 iOS에서 뷰 간 전환 애니메이션을 직접 구현하려면 UIView.animate나 CATransition 등 복잡한 로직을 다뤄야 하는 경우가 많다. 하지만 UIView.transition을 활용하면 비교적 간단한 코드로 뷰 전환 애니메이션을 처리할 수 있다.
1. 개념
UIView.transition은 특정 뷰 또는 뷰 계층에 전환 애니메이션을 적용하고, 해당 블록 안에서 일어나는 뷰 변경을 애니메이션과 함께 처리한다. 대표적으로 다음과 같은 상황에 유용하다.
두 뷰를 교체할 때 (fromView → toView)
뷰의 속성을 변경할 때 (isHidden, alpha, text, image 등)
뷰 계층을 조작할 때 (addSubview, removeFromSuperview 등)
2. 메서드 정의
1
2
3
4
5
6
7
class func transition(
with view: UIView,
duration: TimeInterval,
options: UIView.AnimationOptions = [],
animations: (() -> Void)? = nil,
completion: ((Bool) -> Void)? = nil
)
view: 애니메이션을 적용할 대상 뷰
duration: 애니메이션 지속 시간
options: 애니메이션 옵션 (전환 효과, 방향, 반복 등)
animations: 애니메이션 동안 수행할 뷰 변경 작업
completion: 애니메이션 완료 후 실행할 블록
3. 자주 사용하는 옵션
1
2
3
4
5
6
7
8
.transitionFlipFromLeft
.transitionFlipFromRight
.transitionCurlUp
.transitionCurlDown
.transitionCrossDissolve
.transitionFlipFromTop
.transitionFlipFromBottom
4. 예제: 이미지 교체 애니메이션
1
2
3
UIView.transition(with: imageView, duration: 0.3, options: .transitionCrossDissolve) {
imageView.image = UIImage(named: "new_image")
}
이렇게 하면 imageView의 이미지를 부드럽게 전환할 수 있다.
5. 예제: 뷰 교체
1
2
3
4
5
UIView.transition(from: oldView,
to: newView,
duration: 0.5,
options: [.transitionFlipFromLeft, .showHideTransitionViews])
.showHideTransitionViews옵션은 from 뷰를 isHidden = true로 만들고 to 뷰를 isHidden = false로 설정한다.
내부적으로 oldView.removeFromSuperview(), addSubview(newView)와 달리 뷰 계층은 유지되고 숨김 처리만 되므로 제약 조건이 필요한 경우 유용하다.
6. 실무에서의 활용 포인트
이미지 또는 텍스트 교체 시 부드러운 UX 제공
카드 뒤집기 UI 구현에 적합 (ex. 플립 애니메이션)
상태 전환 (예: 로딩 → 결과 화면)에서 간결한 코드로 가독성 유지
UIView.animate보다 구체적인 전환 효과를 원할 때 대안으로 사용 가능
7. 주의사항
from:to:를 사용하는 경우 두 뷰가 동일한 슈퍼뷰 안에 있어야 하고, 오토레이아웃 충돌을 피하려면 제약 조건을 사전에 설정해야 함
애니메이션 블록 안에서 layout 관련 작업 (setNeedsLayout, layoutIfNeeded)은 transition 효과와 충돌할 수 있음
마무리 UIView.transition은 적은 코드로 자연스러운 전환 효과를 줄 수 있는 강력한 도구다. UI/UX 향상이 필요한 순간에 적절히 활용하면 사용자 경험을 한 단계 끌어올릴 수 있다. 복잡한 애니메이션 없이 간결한 전환을 구현하고 싶을 때 가장 먼저 고려해볼 API다.