UIView.animate: 개념 설명, iOS에서 UIView 속성 애니메이션

UIView.animate란?

UIView.animate는 iOS 4(2010)에서 도입된 UIView 클래스의 정적 메서드입니다. UIView의 애니메이션 가능 속성(frame, bounds, center, alpha, transform, backgroundColor)을 애니메이션하기 위한 선언적 API를 제공합니다. 이 메서드는 속성 변경이 포함된 블록(클로저)을 받습니다 — 시스템은 변경된 각 속성에 대해 자동으로 CABasicAnimation을 생성합니다.

블록 구문은 이전의 beginAnimations/commitAnimations(iOS 2-3)를 대체하고 UIKit의 애니메이션 표준이 되었습니다. UIView.animate 애니메이션은 메인 스레드에서 실행되며 UI를 차단하지 않습니다. 기본적으로 애니메이션 지속 시간은 easeInOut 곡선으로 0.25초입니다.

Apple WWDC 2023에 따르면, 새 프로젝트에서 권장되는 애니메이션 접근 방식은 .animation() 및 .transition() 수정자를 사용한 SwiftUI이지만, UIView.animate는 iOS 16 이하 지원 및 복잡한 사용자 정의 전환을 위한 주요 도구로 남아 있습니다.

애니메이션 매개변수 및 옵션

UIView.animate는 세 가지 주요 매개변수를 제공합니다: duration(초 단위 지속 시간), delay(시작 전 지연), options(UIView.AnimationOptions 비트 마스크 세트). Options에는 curve(easeInOut, easeIn, easeOut, linear), repeat, autoreverse, allowUserInteraction, beginFromCurrentState 및 overrideInheritedDuration이 포함됩니다.

options 매개변수는 배열을 통해 결합됩니다: [.curveEaseOut, .repeat, .autoreverse]. repeat 및 autoreverse를 사용한 애니메이션은 View를 초기 상태로 부드럽게 되돌리고 무기한 반복합니다. 제한된 횟수의 반복에는 animateKeyframes를 사용하세요.

UIView.animate를 통한 스프링 애니메이션

스프링 애니메이션은 물리적 스프링 효과를 추가합니다: 객체가 단순히 A 지점에서 B로 이동하는 것이 아니라 감쇠 진동으로 목표를 초과합니다. 매개변수: usingSpringWithDamping(감쇠 0-1, 0은 최대 진동) 및 initialSpringVelocity(초기 스프링 속도).

Apple은 자연스러운 UI 애니메이션을 위해 0.4-0.8 범위의 usingSpringWithDamping을 권장합니다. 값 0.5는 "고무 같은" 느낌 없이 눈에 띄는 바운스를 만듭니다. initialSpringVelocity = 1.0은 1 pt/초의 속도에 해당합니다. 0에서는 애니메이션이 정지 상태에서 시작됩니다.

// 스프링 애니메이션 및 키프레임 예제
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // 감쇠가 있는 스프링 애니메이션
        UIView.animate(
            withDuration: 0.8,
            delay: 0,
            usingSpringWithDamping: 0.5,
            initialSpringVelocity: 1.0,
            options: [.allowUserInteraction],
            animations: {
                self.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
                self.alpha = 0.7
            },
            completion: { _ in
                UIView.animate(withDuration: 0.3) {
                    self.transform = .identity
                    self.alpha = 1.0
                }
            }
        )
    }

    func slideIn(from offset: CGFloat) {
        self.transform = CGAffineTransform(translationX: offset, y: 0)
        self.alpha = 0.0

        UIView.animate(
            withDuration: 0.6,
            delay: 0.1,
            options: [.curveEaseOut]
        ) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

키프레임 애니메이션

UIView.animateKeyframes를 사용하면 애니메이션을 여러 단계(키프레임)로 나눌 수 있으며, 각 단계에는 고유한 상대 시간과 지속 시간이 있습니다. addKeyframe(withRelativeStartTime:relativeDuration:) 메서드는 전체 애니메이션 지속 시간에 상대적인 0에서 1 사이의 시간 값을 받습니다.

키프레임 애니메이션은 다단계 효과에 유용합니다: 버튼 펄스(확대 → 일시 정지 → 복귀), 순차적 요소 표시, 중간 상태를 포함한 복잡한 변형. 각 키프레임은 options를 통해 고유한 애니메이션 곡선을 가질 수 있습니다.

// 복잡한 시퀀스의 키프레임 애니메이션
func complexPulse() {
    UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
            self.alpha = 0.5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
            self.alpha = 0.8
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

// 중첩 클로저를 사용한 애니메이션
func animateCardTransition() {
    UIView.animate(withDuration: 0.4, delay: 0, options: [.curveEaseOut]) {
        self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    } completion: { _ in
        UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseIn]) {
            self.transform = .identity
        }
    }
}

내부 구조: Core Animation 내부 동작

내부적으로 UIView.animate는 Core Animation(CAAnimation)을 통해 각 UIView의 CALayer에 애니메이션을 위임합니다. 애니메이션 블록 내에서 frame을 변경하면 시스템은 해당 레이어의 position 및 bounds 속성에 대한 CABasicAnimation을 생성합니다. alpha가 변경되면 — 레이어의 opacity 속성에 대한 CABasicAnimation이 생성됩니다.

Core Animation은 120Hz(ProMotion)에서 애니메이션을 처리하는 별도의 렌더 서버 프로세스(iOS의 backboardd)를 사용합니다. UIView.animate는 메인 스레드를 차단하지 않습니다 — 속성 변경 사항이 렌더 서버로 전송되며, 애플리케이션 개입 없이 프레임을 보간합니다.

Apple에 따르면, UIView.animate를 통한 애니메이션은 60FPS에서 변경된 레이어당 약 2-3%의 CPU 오버헤드가 있습니다. 대규모 애니메이션(동시에 20개 이상의 객체)의 경우 CATransaction 및 수동 레이어 관리를 사용하는 것이 좋습니다.

UIKit 애니메이션 디버깅 및 시각화를 위해 Xcode Debug View Hierarchy를 사용하세요 — 각 레이어의 활성 CAAnimation, 지속 시간, 곡선 및 현재 상태를 표시합니다. Core Animation의 내부 구조를 이해하면 복잡한 애니메이션의 성능 문제를 방지하고 UIView.animate와 CABasicAnimation 직접 사용 사이의 최적 접근 방식을 선택하는 데 도움이 됩니다.