[Swift/CoreAnimation] CABasicAnimation 이란

Henry & Co.  님의 사진, 출처:  Pexels

전체 코드 링크

계층 속성에 대한 basic, single-keyframe 애니메이션을 제공하는 객체

 

객체 생성

let animation = CABasicAnimation(keyPath: "position.x")

• initializer을 통해 keyPath를 지정해서 객체 생성

let animation = CABasicAnimation()
animation.keyPath = "position.x"

• keyPath는 따로 지정 가능

keyPath

var keyPath: String? { get set }

• receiver가 애니메이션하는 키 패스를 지정 -> opacity, backgroundColor, position 등 (왜 스트링으로 받도록 했을까 ... ㅠㅠ)

Animatable Properties

• 애니메이션 가능한 값은 위 링크 참조

 

Interpolation values

fromValue : receiver가 사용하는 실제 값

toValue : receiver가 사용하는 end값

byValue : receiver가 사용하는 perform relative interpolation (?)

 

Interpolation Values를 설정하는 법

fromValue, byValue, toValue 모두 옵셔널 값이며 이 중 두 개는 반드시 값을 가져야 함

 

- fromValue, toValue: fromValue -> toValue

- fromValue, byValue: fromValue -> (fromValue + byValue)

- byValue, toValue: (toValue - byValue) -> toValue

- fromValue: fromValue -> property의 current presentation value

- toValue: target layer의 presentation layer의 KeyPath 현재 값 -> toValue

- byValue: target layer의 presentation layer keyPath의 현재 값 + byValue 으로

 

opacity

• 애니메이션 가능한 값
• 0.0 ~ 1.0 까지의 값을 가지며 default는 1.0
• 쉽게 말해 알파값이지만 keyPath에는 "opacity"

    func opacityAnimation() {
        let animation = CABasicAnimation()
        animation.keyPath = "opacity"
        animation.fromValue = 0
        animation.toValue = 1
        animation.duration = 1
        testView.layer.add(animation, forKey: "basic")
    }

ㄴ 0 ~ 1 까지 1초 동안

 

backgroundColor

var backgroundColor: CGColor? { get set }

• layer의 backgroundColor를 변경. animatable 값
• CGColor을 넘겨주어야 정상 작동함. fromValue, toValue 모두 잘 못 입력해도 에러 한줄 안나오니 주의!

    func backgroundColorAnimation() {
        let animation = CABasicAnimation()
        animation.keyPath = "backgroundColor"
        animation.fromValue = UIColor.blue.cgColor
        animation.toValue = UIColor.yellow.cgColor
        animation.duration = 5
        testView.layer.add(animation, forKey: "basic")
        testView.layer.backgroundColor = UIColor.yellow.cgColor
    }

ㄴ receiver의 backgroundColor을 fromValue 파란색에서 toValue 노란색으로 변경하는 코드. 애니메이션이 다 끝난 뒤 백그라운드 값을 변경해 주어야 마지막 애니메이션 값에서 끝난 것처럼 할 수 있음

 

position

var position: CGPoint { get set }

• position은 anchorPoint 값을 기준으로 하는데 이때 anchorPoint는 layer의 bound의 center 값 (x point라고 x 값 넘겨 주는 것 아님. 좌표계를 이해할 필요가 있음)

• 이동하고자 하는 좌표가 x, y라면 toValue에 전달해야 하는 값은 [x+(width/2), y+(height/2)] 가 되며 쉽게 center 값을 사용해서 넘기면 계산하기 쉬움 (toValue, fromValue 모두 anchorPoint이므로 주의)

    func positionAnimation() {
        let animation = CABasicAnimation()
        animation.keyPath = "position.x"
        animation.fromValue = testView.center.x
        animation.toValue = 300
        animation.duration = 3
        testView.layer.add(animation, forKey: nil)
        testView.layer.position = CGPoint(x: 300, y: testView.center.y)
    }

• 예시 코드는 x point만 변경하는 코드이며, 업데이트 위해서 마지막에 layer.position 값을 변경하면 됨

let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = [0, 0]
animation.toValue = [100, 100]

• 출처 : apple developer document 

scale

var transform: CATransform3D { get set }

• scale 값을 변경. CATransform3D 값을 변경하기 때문에 마지막에 layer 업데이트 하고 싶은 경우 CATransform3DMakeScale 를 사용 

    func scaleAnimation() {
        let animation = CABasicAnimation()
        animation.keyPath = "transform.scale.x"
        animation.fromValue = 1
        animation.toValue = 2
        animation.duration = 3
        testView.layer.add(animation, forKey: nil)
        testView.layer.transform = CATransform3DMakeScale(2, 1.0, 1.0)
    }

• x를 2배로 변경하는 코드. duration 동안 animation 일어나며 끝난 후 layer을 업데이트 하고 싶은 경우 CATransform3DMakeScale로 값 변경 이때 인자는 순서대로 x, y, z

🦑 이상한 점이나 문제시 댓글 부탁드려요!

참고 사이트 및 도서

https://developer.apple.com/documentation/quartzcore/cabasicanimation

https://github.com/jrasmusson/swift-arcade/blob/master/Animation/CoreAnimation/Intro/README.md