Colin's Blog
[swift] Swift Core Animation의 애니메이션 효과

Core Animation은 iOS 및 macOS 애플리케이션에서 애니메이션을 제어하는 데 사용되는 강력한 프레임워크입니다. Swift에서 Core Animation을 사용하면 시각적 효과를 적용하여 화면을 움직이고 회전시키는 등 다양한 애니메이션을 만들 수 있습니다.

이번 블로그 포스트에서는 Swift Core Animation을 사용하여 애니메이션 효과를 추가하는 방법에 대해 알아보겠습니다.

1. CALayer 애니메이션

Core Animation은 CALayer를 기반으로 동작합니다. CALayer는 뷰의 시각적 표현을 나타내는 객체입니다. 따라서 먼저 뷰의 CALayer를 만들어야 합니다.

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

2. 기본 애니메이션

CALayer에 애니메이션을 적용하려면 CABasicAnimation을 사용합니다. 다음은 뷰의 크기를 절반으로 줄이는 애니메이션을 추가하는 예제입니다.

let animation = CABasicAnimation(keyPath: "bounds.size")
animation.fromValue = NSValue(cgSize: CGSize(width: 100, height: 100))
animation.toValue = NSValue(cgSize: CGSize(width: 50, height: 50))
animation.duration = 1.0
layer.add(animation, forKey: "sizeAnimation")

3. 키프레임 애니메이션

키프레임 애니메이션을 사용하여 여러 개의 중간 상태로 애니메이션을 만들 수도 있습니다. 다음은 뷰를 왼쪽으로 이동한 후 다시 오른쪽으로 이동하는 애니메이션을 추가하는 예제입니다.

let animation = CAKeyframeAnimation(keyPath: "position")
animation.values = [
    NSValue(cgPoint: CGPoint(x: 0, y: 0)),
    NSValue(cgPoint: CGPoint(x: -100, y: 0)),
    NSValue(cgPoint: CGPoint(x: 100, y: 0)),
    NSValue(cgPoint: CGPoint(x: 0, y: 0))
]
animation.keyTimes = [0, 0.25, 0.75, 1.0]
animation.duration = 2.0
layer.add(animation, forKey: "positionAnimation")

4. 그룹 애니메이션

여러 개의 애니메이션을 동시에 실행하려면 CAAnimationGroup을 사용합니다. 다음은 뷰의 크기를 절반으로 줄이는 애니메이션과 투명해지는 애니메이션을 동시에 실행하는 예제입니다.

let sizeAnimation = CABasicAnimation(keyPath: "bounds.size")
sizeAnimation.fromValue = NSValue(cgSize: CGSize(width: 100, height: 100))
sizeAnimation.toValue = NSValue(cgSize: CGSize(width: 50, height: 50))

let opacityAnimation = CABasicAnimation(keyPath: "opacity")
opacityAnimation.fromValue = 1.0
opacityAnimation.toValue = 0.0

let groupAnimation = CAAnimationGroup()
groupAnimation.animations = [sizeAnimation, opacityAnimation]
groupAnimation.duration = 1.0
layer.add(groupAnimation, forKey: "groupAnimation")

5. 커스텀 애니메이션

더 많은 컨트롤이 필요한 경우 CAKeyframeAnimation을 사용하여 직접 중간 상태를 지정할 수 있습니다. 다음은 하트 모양을 그리는 커스텀 애니메이션의 예제입니다.

let animation = CAKeyframeAnimation(keyPath: "path")
animation.values = [
    UIBezierPath(rect: CGRect(x: 0, y: 0, width: 100, height: 100)).cgPath,
    UIBezierPath(rect: CGRect(x: 50, y: 50, width: 100, height: 100)).cgPath,
    UIBezierPath(rect: CGRect(x: 100, y: 0, width: 100, height: 100)).cgPath,
    UIBezierPath(rect: CGRect(x: 0, y: 0, width: 100, height: 100)).cgPath
]
animation.keyTimes = [0, 0.33, 0.66, 1.0]
animation.duration = 2.0
layer.add(animation, forKey: "pathAnimation")

위에서 다룬 예제들은 Swift에서 Core Animation을 사용한 애니메이션 효과를 추가하는 방법을 보여줍니다. Core Animation은 더 복잡한 애니메이션 효과도 구현할 수 있으며, 위의 예제들을 참고하여 자신만의 애니메이션을 만들어보세요.

더 자세한 내용은 Apple Core Animation Programming Guide를 참고하세요.

© 2018 Colin. All rights reserved.