UIKit에서 Core Animation 사용하기: 고급 애니메이션 기법

iOS 개발에서 애니메이션은 사용자 경험을 향상시키는 중요한 요소입니다. UIKit과 Core Animation은 이러한 애니메이션을 구현할 수 있는 강력한 도구들을 제공하며, 이 두 가지를 결합하여 고급 애니메이션 기법을 적용할 수 있습니다. 이번 글에서는 Swift로 UIKit에서 Core Animation을 사용하여 고급 애니메이션을 구현하는 방법을 살펴보겠습니다.

Core Animation 기본 개념

Core Animation은 QuartzCore 프레임워크의 일부분으로, 그래픽, 애니메이션 및 디스플레이 관련 작업을 효과적으로 처리할 수 있게 해줍니다. Core Animation의 기본 구성 요소는 레이어(CALayer)입니다. UIView는 내부적으로 CALayer를 사용하여 자신을 화면에 표시합니다.

CALayer

CALayer는 뷰와 동기화되어 애니메이션을 지원합니다. 다음은 CALayer에서 제공되는 주요 기능들입니다:

• 프레임: 레이어의 위치와 크기를 정의합니다.
• 백그라운드 색상: 레이어의 배경 색상을 설정합니다.
• 경계: 레이어의 테두리를 설정합니다.
• 매스크: 레이어의 특정 부분을 숨깁니다.
• 변형: 회전, 스케일링 등의 변환을 적용합니다.

swift
import QuartzCore

let layer = CALayer()
layer.backgroundColor = UIColor.blue.cgColor
layer.frame = CGRect(x: 50, y: 50, width: 100, height: 100)
view.layer.addSublayer(layer)

위 코드는 간단한 CALayer를 정의하고 이를 UIView에 추가하는 예제입니다.

기본 애니메이션

CABasicAnimation을 사용하면 단일 레이어 속성을 애니메이션화할 수 있습니다. 예를 들어, 투명도 변화를 애니메이션화해 보겠습니다.

swift
let animation = CABasicAnimation(keyPath: "opacity")
animation.fromValue = 1
animation.toValue = 0
animation.duration = 2
layer.add(animation, forKey: "opacityAnimation")
layer.opacity = 0

이 예제에서는 레이어의 opacity 속성을 1에서 0으로 변화시키며, 지속 시간은 2초로 설정했습니다.

그룹 애니메이션

다수의 애니메이션을 동시에 실행하려면 CAAnimationGroup을 사용합니다. 다음은 회전 및 크기 변환을 동시에 애니메이션화하는 예제입니다.

swift
let rotation = CABasicAnimation(keyPath: "transform.rotation")
rotation.fromValue = 0
rotation.toValue = CGFloat(Double.pi * 2)

let scale = CABasicAnimation(keyPath: "transform.scale")
scale.fromValue = 1
scale.toValue = 2

let group = CAAnimationGroup()
group.animations = [rotation, scale]
group.duration = 3
layer.add(group, forKey: "groupAnimation")

이 예제에서는 레이어가 3초 동안 회전하고 크기를 2배로 증가시키는 두 가지 애니메이션을 동시에 실행합니다.

키프레임 애니메이션

더 복잡한 애니메이션을 구현하기 위해 CAKeyframeAnimation을 사용합니다. 위치를 따라 움직이는 애니메이션 예제를 살펴보겠습니다.

swift
let path = UIBezierPath()
path.move(to: CGPoint(x: 50, y: 50))
path.addCurve(to: CGPoint(x: 300, y: 50), controlPoint1: CGPoint(x: 100, y: 300), controlPoint2: CGPoint(x: 200, y: -200))

let animation = CAKeyframeAnimation(keyPath: "position")
animation.path = path.cgPath
animation.duration = 4
layer.add(animation, forKey: "positionAnimation")

위 예제에서는 사각형이 베지어 곡선 경로를 따라 움직입니다.

고급 애니메이션 기법

이제 기본 애니메이션을 이해했으니, 고급 애니메이션 기법을 살펴보겠습니다. 예를 들어, 애니메이션 시퀀스를 생성할 수 있습니다.

애니메이션 시퀀스

여러 애니메이션을 순차적으로 실행하기 위해 CAAnimationGroup과 CATransaction을 사용합니다.

swift
CATransaction.begin()
CATransaction.setCompletionBlock {
    let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
    scaleAnimation.fromValue = 1
    scaleAnimation.toValue = 1.5
    scaleAnimation.duration = 1
    layer.add(scaleAnimation, forKey: "scaleAnimation")
}

let opacityAnimation = CABasicAnimation(keyPath: "opacity")
opacityAnimation.fromValue = 1
opacityAnimation.toValue = 0
opacityAnimation.duration = 1
layer.add(opacityAnimation, forKey: "opacityAnimation")

CATransaction.commit()

이 예제에서는 투명도 애니메이션이 완료된 후 크기 변환 애니메이션이 실행됩니다.

마무리

이 글에서는 UIKit에서 Core Animation을 활용하여 고급 애니메이션을 구현하는 다양한 방법을 살펴보았습니다. 기본 애니메이션, 그룹 애니메이션, 키프레임 애니메이션, 그리고 애니메이션 시퀀스를 통해 더 나은 사용자 경험을 제공할 수 있습니다. 다양한 애니메이션 기법을 활용하여 당신의 앱을 더욱 매력적으로 만들어 보세요.