Reference
Core Animation은 View와 시각요소들에 애니메이션을 적용하는 범용적인 그래픽 렌더링 및 애니메이션 인프라입니다. Core Animation을 사용하면 애니메이션을 만드는데 필요한 대부분의 작업이 자동으로 이뤄지므로, 우리는 몇가지 파라미터(ex. 시작점/끝점) 정도만 알려주면 애니메이션을 만들 수 있습니다
위 그림처럼 APPKit과 UIKit은 Core Animation을 포함하고 있으며, Cocoa/CocoaTouch의 view workflow와도 밀접하게 결합되어 있습니다. Core Animation은 Core Graphics와 달리 드로잉 시스템 자체가 아니고, App의 content들을 결합/조작하는 인프라입니다
Core Animation의 중심에는 Layer 객체가 있으며 이를 사용하여 content를 관리/조작합니다. layer는 content를 비트맵으로 캡쳐합니다
❗️Layer 수정이 곧 애니메이션이 된다❗️
Layer의 속성을 변경하는 것이 곧 애니메이션이 됩니다. Layer는 view처럼 bounds, position, opacity 등의 속성을 가지고 있고, 이 속성 값을 변경하면 이전 값에서 새로운 값으로 변경되는 애니메이션이 생성됩니다
Layer는 drawing을 직접 하지 않고, 자신의 속성을 변경함으로써 애니메이션을 트리거시킵니다.
위 그림을 참고로 애니메이션이 보여지는 과정을 살펴보면
1. 우선 Layer는 App이 제공하는 content를 캡쳐하여 Backing Store라고 불리는 비트맵에 캐시합니다
2. 이후 Layer의 속성이 변경되면 이 비트맵과 속성정보들을 그래픽 하드웨어로 보냅니다
3. 그래픽 하드웨어는 캐시된 비트맵과 속성정보들을 바탕으로 비트맵을 조작합니다
위 사진 외에도 많이 있으며 상세한 목록은 CALayer Animatable Properties를 참고합니다
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을 사용하는 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만으로는 시각 인터페이스를 만들 수 없습니다. layer는 event를 처리하거나, content를 그리거나, responder chain에 참여하거나 하는 등의 많은 작업을 수행하지 않기 때문입니다
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")
}