Reference
🌀 이론
🔸 Core Animation
Core Animation은 View와 시각요소들에 애니메이션을 적용하는 범용적인 그래픽 렌더링 및 애니메이션 인프라입니다. Core Animation을 사용하면 애니메이션을 만드는데 필요한 대부분의 작업이 자동으로 이뤄지므로, 우리는 몇가지 파라미터(ex. 시작점/끝점) 정도만 알려주면 애니메이션을 만들 수 있습니다
위 그림처럼 APPKit과 UIKit은 Core Animation을 포함하고 있으며, Cocoa/CocoaTouch의 view workflow와도 밀접하게 결합되어 있습니다. Core Animation은 Core Graphics와 달리 드로잉 시스템 자체가 아니고, App의 content들을 결합/조작하는 인프라입니다
🔸 Layer란?
Core Animation의 중심에는 Layer 객체가 있으며 이를 사용하여 content를 관리/조작합니다. layer는 content를 비트맵으로 캡쳐합니다
❗️Layer 수정이 곧 애니메이션이 된다❗️
Layer의 속성을 변경하는 것이 곧 애니메이션이 됩니다. Layer는 view처럼 bounds, position, opacity 등의 속성을 가지고 있고, 이 속성 값을 변경하면 이전 값에서 새로운 값으로 변경되는 애니메이션이 생성됩니다
🔸 Layer Drawing 메커니즘
Layer는 drawing을 직접 하지 않고, 자신의 속성을 변경함으로써 애니메이션을 트리거시킵니다.
위 그림을 참고로 애니메이션이 보여지는 과정을 살펴보면
1. 우선 Layer는 App이 제공하는 content를 캡쳐하여 Backing Store라고 불리는 비트맵에 캐시합니다
2. 이후 Layer의 속성이 변경되면 이 비트맵과 속성정보들을 그래픽 하드웨어로 보냅니다
3. 그래픽 하드웨어는 캐시된 비트맵과 속성정보들을 바탕으로 비트맵을 조작합니다
🔸 애니메이션이 가능한 Layer 프로퍼티
위 사진 외에도 많이 있으며 상세한 목록은 CALayer Animatable Properties를 참고합니다
🔸 Layer의 좌표계
Layer는 point-based 좌표계와 unit 좌표계를 모두 사용하여 content를 배치합니다. 둘 중 어느 좌표계가 사용될지는 전달되는 정보에 달렸습니다
🔘 point-based 좌표계
point-based 좌표계는 흔히 사용되는 방식으로 size와 position을 특정 값으로 지정하는 방식을 말합니다 (ex. bounds/position)
❗️position은 center가 기준이다
위 point-based 좌표계 그림에서 보이듯 position.x를 50으로 주면 모서리에 잡히는 bounds/frame과는 달리, layer의 center를 기준으로 50pt 지점에 잡힌다
🔘 unit 좌표계
unit 좌표계는 0~1 값으로 화면의 퍼센트로 지정하는 방식입니다 (ex. anchorPoint)
🔸 Core Animation의 Tree
Core Animation을 사용하는 App에는 3개의 요소 집합(Tree)이 있습니다. 각 집합은 content를 화면에 표시하는데 있어 서로 다른 역할을 합니다
🔘 Model Layer Tree (혹은 Layer Tree)
App과 가장 많이 상호작용하는 집합으로, 각 Layer는 모든 애니메이션의 타겟 값을 저장합니다. 애니메이션을 위해 이 중 하나를 골라 프로퍼티를 변경하게 됩니다
🔘 Presentation Tree
실행 중인 에니메이션의 현재 진행 값이 들어 있습니다. Model Layer Tree가 타겟 값이라면, 여기는 변화 중인 현재 값을 반영합니다. 이 Tree는 수정하면 안됩니다
🔘 Render Tree
실제 애니메이션을 수행하는 객체를 말합니다. Core Animation이 private하게 가지고 있어 우리는 접근할 수 없습니다
(추가)
x축 이동하는 애니메이션이 발생했다가 끝나면 원점으로 돌아오는 경우가 있다. 이는 Presentation layer는 변경하며 사용했으나, Model layer는 변경하지 않은 예시이다
🔸 Layer와 View의 관계
Layer는 하나 이상의 View와 함께 해야 합니다. Layer는 View를 대체하지 못하며, layer만으로는 시각 인터페이스를 만들 수 없습니다. layer는 event를 처리하거나, content를 그리거나, responder chain에 참여하거나 하는 등의 많은 작업을 수행하지 않기 때문입니다
예제
Basic
let action = UIAction { (action) in
let anim = CABasicAnimation()
anim.keyPath = "position.x"
anim.fromValue = 100
anim.toValue = 200
anim.duration = 0.5
anim.fillMode = .forwards // 이걸해줘야 하는데 이게뭘까ㅎ
anim.isRemovedOnCompletion = false // Presentation -> Model 반영
self.image.layer.add(anim, forKey: "basic")
}