[iOS] Core Animation Programming Guide (1) Core Animation Basics

안녕하세요 Hani입니다.

Core Animation을 알아볼 거예욥.

 

목차는 이렇구

1. Core Animation Basics

2. Setting Up Layer Objects

3. Animating Layer Content

4. Building a Layer Hierarchy

5. Advanced Animation Tricks

6. Changing a Layer’s Default Behavior

7. Improving Animation Performance

 

이번엔 첫 번째 주제인 Core Animation Basics 차례 ☺️

---

Core Animation은 iOS와 macOS에서 뷰를 비롯한 시각적 요소의 그래픽 렌더링과 애니메이션을 위한 프레임워크예요.

 

Core Animation은 시각 컨텐츠를 비트맵으로 캐싱하여

그래픽 하드웨어가 직접 조작할 수 있도록 만들 수 있어서 더 나은 성능을 기대할 수 있습니다.

 

시각적 요소의 변화를 애니메이션하기 위해 Core Animation을 사용할 텐데

여기서 변화란 이미지 객체 프로퍼티의 변경을 의미해요.

뷰의 위치나 크기 등의 프로퍼티가 변하면

변하기 전과 후의 과정을 애니메이션으로 보여줍니다. 

---

Layers Provide the Basis for Drawing and Animations

Core Animation의 핵심인 Layer 객체는 3D 공간에 구성된 2D 표면입니다.

 

Layer는 View처럼 위치나 컨텐츠에 관한 정보를 관리하지만

View와 다른 점은 자신의 Appearance를 정의하지 않는다는 거예요.

Layer는 단지 비트맵 이미지에 대한 상태 정보(State Infomation)를 관리할 뿐입니다.

 

View의 rootLayer는 주로 데이터를 관리하기 때문에 모델 객체로 간주되곤 합니다.

 

 

 

The Layer-Based Drawing Model

대부분의 레이어는 컨텐츠를 직접 그리는 역할을 하지 않고, 비트맵으로 캐싱합니다.

(이를 backing store라고 부르기도 함)

 

그 후에 레이어의 프로퍼티가 바뀌면, 이 변화가 애니메이션을 유발하여 

Core Animation가 레이어의 비트맵 컨텐츠와 변경된 상태 정보를 그래픽 하드웨어에게 넘겨주고

그래픽 하드웨어는 이를 받아서 비트맵을 조작하고 렌더링 하는 작업을 진행합니다.

 

소프트웨어에서 비트맵을 조작하지 않고 하드웨어에서 해주는 이유는 더 빠르기 때문이에욥.

 

뷰 기반으로 컨텐츠를 그리는 것은

뷰에 변화가 생기면 새로운 파라미터로 뷰를 다시 그리는 draw 메서드를 호출하게 되는데

이는 메인 스레드에서 CPU를 사용하기 때문에 비용이 많이 드는 뷰의 메서드입니다.

 

Core Animation은 이를 피하기 위해 컨텐츠를 비트맵으로 캐시하고

하드웨어에서 비트맵을 조작하는 방식을 취합니다.

 

 

Layer-Based Animations

그럼 레이어를 기반으로 그리는 것은 어떨까욥

 

레이어 객체의 데이터 및 상태 정보는 화면에 보이는 레이어의 컨텐츠의 시각적 표현과는 decouple되어 있습니다.

 

몬 소린가 하니..!

레이어는 어떻게 그릴지는 관여하지 않고, 컨텐츠와 컨텐츠를 어떻게 보여줄지에 대한 프로퍼티만 들고 있다는 소리예요. ☺️

 

이러한 decoupling은 Core Animation이 개입하여 이전 값에서 새로운 값으로의 변화를 애니메이션하는 방법을 제공합니다.

 

 

layer에 수행할 수 있는 애니메이션들

애니메이션이 진행되는 동안, Core Animation은 하드웨어에서 프레임마다 컨텐츠를 그려줍니다. 

 

개발자는 애니메이션의 시작과 끝만 지정해주면 됩니다. ☺️

 

 

---

Layer Objects Define Their Own Geometry

레이어의 작업 중 하나는
컨텐츠의 bounds, 화면 상에서의 위치 그리고 레이어의 회전, 배율, 변형 등의 정보를 포함한 Geometry를 관리하는 것이에요.

 

뷰와 마찬가지로 레이어도 Frame과 Bounds를 가지고 있어서 레이어와 컨텐츠의 위치를 정할 수 있는데

레이어는 뷰에는 없는 Anchor Point 등의 프로퍼티를 가지고 있어서

레이어의 Geometry는 뷰의 Geometry와는 다른 측면이 있습니다.

 

 

Layers Use Two Types of Coordinate Systems

레이어는 두 가지 타입의 좌표계를 가지고 있습니다.

 

포인트 기반 좌표계(Point-based Coordinates)는 화면 좌표에 직접 매핑되거나 
레이어의 position 프로퍼티처럼 다른 레이어에 상대적으로 지정되어야 할 때 사용됩니다.

 

단위 좌표계(Unit Coordinates)는 어떤 값이 다른 값에 상대적이기 때문에 화면 좌표에 연결되어서는 안 되는 경우에 사용됩니다.

 

포인트 기반 좌표계가 사용되는 대부분의 경우는

레이어의 bounds와 position 프로퍼티를 이용하여 레이어의 크기와 위치를 지정할 때입니다.

 

bounds는 레이어 자체의 좌표계를 정의하고 화면에서 레이어의 크기를 포함합니다.

position은 부모 좌표계에 대한 레이어의 위치를 정의합니다.

 

layer가 frame 프로퍼티도 가지고 있긴 하지만 bounds와 posititon을 통해 얻어지며 직접 frame을 사용하는 경우는 드뭅니다. 

 

 

 

layer의 Geometric

레이어의 bounds와 frame의 방향은 항상 플랫폼의 기본 방향과 일치합니다.

 

iOS에서는 좌표계의 왼쪽 상단이 원점이고 macOS에서는 왼쪽 하단이기 때문에

iOS와 macOS 앱의 코드를 공유하고 있다면 서로 다른 좌표계를 고려해야 합니다.

 

layer의 position 프로퍼티는 컨텐츠의 중심을 의미하는데

이 프로퍼티는 layer의 anchorPoint 프로퍼티의 값에 따라 정의가 바뀝니다.

 

anchorPoint는 단위 좌표계를 사용하여 지정되는 프로퍼티 중 하나로, 특정 좌표가 시작되는 점을 나타냅니다.

단위 좌표는 0.0부터 1.0 사이의 값을 갖습니다.

 

iOS와 macOS에서의 단위 좌표계

 

---

Anchor Points Affect Geometric Manipulations

layer의 Geometric 조작은 layer의 anchorPoint 프로퍼티를 기준으로 발생합니다.

anchorPoint의 영향력은 주로 layer의 position이나 transform 등의 프로퍼티를 변경할 때 볼 수 있습니다.

 

position에 대한 anchorPoint의 영향력을 볼 수 있는 예시 / 좌: iOS, 우: macOS

anchorPoint는 위에서 언급했듯이 단위 좌표계에서 놀기 때문에 0.0에서 1.0 사이의 값을 갖고

디폴트로 (0.5, 0.5) 값을 가지고 있습니다.

 

layer의 부모 bounds 내에서 이동하지 않았음에도

anchorPoint의 값을 (0, 0)으로 바꾸면 position이 변경됩니다.

 

 

transform에 대한 anchorPoint의 영향력을 볼 수 있는 예시 / 좌: iOS, 우: macOS

layer를 rotation transform하면 anchorPoint를 중심으로 발생하게 되는데

디폴트는 (0.5, 0.5)인 layer의 중심에서 발생하지만

 

anchorPoint의 값을 (0, 0)으로 바꾸면 기존과 다른 위치를 중심으로 transform이 발생합니다.

 

 

 

 

Layers Can Be Manipulated in Three Dimensions

모든 layer는 layer와 layer의 컨텐츠를 조작할 수 있는 두 가지 방법이 있습니다.

 

layer의 transform 프로퍼티는 layer와 layer의 sublayer에 모두 적용되는 변형을 지정할 수 있습니다.

아니면 sublayerTransform 프로퍼티를 이용하여 sublayer에만 적용되는 변형을 지정할 수도 있습니다.

 

 

 

엄.. Core Animation은 이러이러이러한 것을 이용하여 기존 점을 transform한 새로운 점 좌표를 얻어낼 수 있다고 합니다.

알 필요는 없대요.

 

필요 있어도 알려고 하지 않겠습니다. ㅎㅋㅋ (🙏)

 

예.. 뒤집고 볶는 변환을 위해 쓰신다고 하네요.

 

 

---

Layer Trees Reflect Different Aspects of the Animation State

Core Animation을 사용하는 앱은 3개의 Layer 객체를 가지고 있으며,

이 객체들은 화면에 컨텐츠를 보여주기 위해 서로 다른 역할을 합니다.

 

(Model) Layer Tree

모델 레이어 트리의 레이어 객체는 애니메이션을 위한 타겟 값을 저장하고 있습니다.

레이어의 프로퍼티가 변할 때마다 이 트리의 레이어 객체 중 하나를 사용하게 됩니다.

 

Presentation Layer Tree

프레젠테이션 레이어 트리의 레이어 객체는 실행 중인 애니메이션에 대한 값을 가지고 있습니다.

이 트리에 있는 객체는 변경할 수 없으나, 객체의 값을 읽고 새로운 애니메이션을 생성할 수 있습니다.

 

Render Tree

렌더 트리는 실제로 애니메이션을 수행하며, Core Animation만이 접근할 수 있습니다.

 

 

Layer의 초기 계층 구조는 View와 완벽히 대응되는 계층 구조로 이루어져 있지만

필요에 따라 레이어에 서브레이어를 추가할 수 있습니다.

 

 

프레젠테이션 트리와 렌더 트리에는 레이어 트리의 모든 객체에 대하여 매칭 되는 객체가 있습니다.

 

앱은 주로 레이어 트리와 상호작용하지만 가끔은 프레젠테이션 트리에 접근하기도 합니다.

 

CALayer의 인스턴스 메서드인 presentation을 통해

현재 화면에 애니메이션 되고 있는 레이어의 상태를 갖고 있는 프레젠테이션 레이어 객체의 복사본을 얻을 수 있습니다.

 

 

---

The Relationship Between Layers and Views

레이어 객체 단독으로는 컨텐츠를 보여줄 순 없습니다.

레이어는 뷰를 위한 인프라 제공, 뷰의 컨텐츠를 그리고 애니메이션하는 것을 효율적으로 만들어 줄 뿐이며

레이어는 이벤트를 다루지 못하고 컨텐츠를 그리지 못하고 Responder Chain에 관여할 수 없습니다.

 

따라서 유저와의 상호작용을 다루기 위해 하나 이상의 뷰를 가져야 할 필요가 있는 거예요. ☺️

 

 

iOS에서는 뷰에 대응하는 레이어를 가지고 있지만 macOS에서는 레이어를 갖게 만들지 결정해야 합니다.

macOS에서도 레이어를 갖게 만드는 것이 대부분 더 낫지만

레이어를 갖게 되면 오버헤드가 추가되기 때문에 어느 것이 더 나은지 성능을 테스트해봐야 합니다.

 

뷰를 위한 레이어를 활성화하면 시스템이 layer-backed view를 위한 기본 레이어를 생성하고 뷰와 동기화를 시켜줍니다.

iOS에서는 모든 뷰가 layer-backed view이며 macOS의 대부분의 뷰도 layer-backed view입니다.

 

단, macOS에서는 layer-hosting view라는 것도 생성할 수 있는데

AppKit은 뷰와 레이어를 동기화시켜주진 않습니다.

 

 

---

References

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/CoreAnimationBasics/CoreAnimationBasics.html#//apple_ref/doc/uid/TP40004514-CH2-SW3