[swift] Swift Core Animation을 활용한 상하반전 애니메이션

07 Dec 2023

swift

Core Animation은 iOS 및 macOS 애플리케이션에서 애니메이션을 만들고 제어하는 강력한 프레임워크입니다. 이 기능을 사용하여 상하반전 애니메이션을 만들어보겠습니다.

1. CALayer와 CABasicAnimation

Core Animation을 사용하기 위해 CALayer와 CABasicAnimation을 사용합니다. CALayer는 뷰의 껍질로서 애니메이션을 적용할 객체입니다. CABasicAnimation은 CALayer의 속성을 애니메이션화하는 데 사용됩니다.

import UIKit

class FlipAnimationViewController: UIViewController {

    var animationLayer: CALayer!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 애니메이션을 적용할 뷰 생성
        let rect = CGRect(x: 100, y: 100, width: 200, height: 200)
        let view = UIView(frame: rect)
        view.backgroundColor = UIColor.red
        self.view.addSubview(view)

        // CALayer 생성 및 추가
        animationLayer = CALayer()
        animationLayer.bounds = rect
        animationLayer.position = view.center
        animationLayer.backgroundColor = UIColor.blue.cgColor
        view.layer.addSublayer(animationLayer)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        // 상하반전 애니메이션 적용
        let animation = CABasicAnimation(keyPath: "transform")
        animation.duration = 1.0
        animation.fromValue = NSValue(caTransform3D: CATransform3DIdentity)
        animation.toValue = NSValue(caTransform3D: CATransform3DMakeRotation(CGFloat.pi, 1.0, 0.0, 0.0))
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        animationLayer.add(animation, forKey: nil)
    }
}

2. 애니메이션 설명

위의 예제 코드에서는 FlipAnimationViewController 클래스 내부에서 애니메이션을 만들고 적용합니다.

viewDidLoad 메서드에서 애니메이션을 적용할 뷰를 생성하고, CALayer를 생성하여 해당 뷰에 추가합니다.
viewDidAppear 메서드에서 CABasicAnimation을 이용하여 상하반전 애니메이션을 만들고, 생성한 CALayer에 추가합니다.

애니메이션 파라미터 설명:

keyPath: "transform": 애니메이션을 적용할 속성입니다.
duration: 애니메이션의 지속 시간입니다.
fromValue: 애니메이션의 시작 값입니다.
toValue: 애니메이션의 끝 값입니다.
fillMode: 애니메이션 완료 후의 상태를 유지할지 결정합니다.
isRemovedOnCompletion: 애니메이션이 완료되었을 때, 애니메이션 효과를 제거할지 결정합니다.

애니메이션의 시작 값인 CATransform3DIdentity는 기본 변환 값으로, 해당 객체를 가시적으로 표시하지 않습니다. 애니메이션의 끝 값인 CATransform3DMakeRotation은 상하반전을 나타내는 3D 회전 변환을 생성합니다.

애니메이션의 결과로 CALayer의 배경색이 상하로 반전되는 애니메이션이 적용됩니다.

1. CALayer와 CABasicAnimation

2. 애니메이션 설명

3. 참고 자료