[iOS/UI] Core Animation이란? (feat. CALayer)

 

안녕하세요 Foma 💻 입니다!

 

오늘은 애니메이션이 작동되는 원리에 대해 더 깊게 이해하기 위해서 iOS에서 애니메이션 시스템을 담당하는 Core Animation에 대해서 알아보려고 합니다.

 

바로 시작할게요~

---

Core Animation이란?

 

• 뷰 및 기타 시각적 요소에 애니메이션을 적용하기 위한 범용 시스템
• 그래픽 렌더링 및 애니메이션 인프라
• 뷰와 통합되어 콘텐츠 애니메이션을 위한 더 나은 성능과 지원을 제공하는 기술

 

아래와 같이 UIKit 및 AppKit의 근간이 되는 기술로 iOS 및 OS X를 앱을 개발하고 있다면 무조건 Core Animation을 사용하는 것입니다.

 

Core Animation을 직접 사용할 필요는 없지만 사용할 때 Core Animation이 어떠한 원리로 수행되는지 이해할 필요는 있습니다.

 

특히 애니메이션을 더 많이 제어하거나 레이어를 사용하여 그리기 성능을 향상시키려는 개발자들을 반드시 이해해야 합니다.

 

---

Core Animation의 원리

 

Core Animation은 화면에 그리는 작업의 대부분을 온보드 그래픽 하드웨어로 넘겨 렌더링을 가속화합니다.

 

이 자동 그래픽 가속은 앱 속도를 늦추지 않으면서 높은 프레임 속도와 부드러운 애니메이션을 제공하는데요.

 

특히 View와 통합되어 컨텐츠 애니메이션을 위한 더 나은 성능을 제공합니다.

 

그 방법은 바로 View의 컨텐츠 내용을 그래픽 하드웨어에서 직접 조작할 수 있도록 "비트맵" 으로 캐싱하여 동작을 수행합니다.

 

 

 

 

대부분의 시각적 변경 사항은 개체의 속성 바뀌는 것과 관련이 있습니다.

 

쉽게 예를 들면, 위치가 바뀐다거나 크기가 커지거나 작아진다거나 불투명해지는 등의 변경 사항이 있습니다.

 

Core Animation은 이러한 변경 사항을 속성의 현재 값에서 바뀐 새 값을 캐싱해 애니메이션을 적용하는 것이죠.

 

---

Layer

 

Core Animation은 하드웨어에서 앱 컨텐츠를 합성하고 조작하기 위한 인프라인데, 이 인프라의 중심에는 "Layer"가 있습니다.

 

위에서 Core Animation은 하드웨어에서 쉽게 조작할 수 있도록 비트맵을 캐싱한다고 말했죠?

 

바로 이 역할을 Layer가 담당합니다.

 

더 구체적으로 설명드리면 Layer는 컨텐츠의 변경 사항을 캡쳐해 저장하고, 이것을 하드웨어에 전달하여 소프트웨어에서 보다 훨씬 빠르게 동작할 수 있는 애니메이션을 생성합니다.

 

 

"만약 View로 이러한 작업을 한다면 어떻게 될까요?"

 

View를 변경하면 drawRect 메서드를 호출하여 새로운 매개변수를 사용하여 내용을 다시 그리게 됩니다.

 

이런 방식은 메인 스레드의 CPU를 사용하기 때문에 비용이 많이 들게 됩니다.

 

하지만 Layer는 이미 캐시된 비트맵을 조작하여 동일하거나 유사한 효과를 얻어 훨씬 효율적이죠.

 

그렇기 때문에 View의 어떠한 시각적인 변경이 있을 때, 예를 들면 모서리를 둥글게 한다거나 테두리의 두께를 지정할 때 등에서 

 

아래와 같이 View의 Layer에 접근하여 변경하게 되는 것입니다.

 

view.layer.cornerRadius = 10
view.layer.borderWidth = 1

---

오늘은 Core Animation이 무엇이고 어떠한 원리로 작동되는지에 대해 간단하게 알아보았는데요.

 

글을 작성하다보니, Core Animation의 핵심인 Layer에 대한 부분이 너무 많아 다음 글에서 따로 Layer에 대해 더 깊게 알아보려고 합니다.

 

(Layer에 대해 더 알고싶은 분은 여기 에서 확인해 주세요!)

 

혹시라도 궁금하신 사항이 있다면 아래 댓글로 알려주세요!

---

Reference

 

About Core Animation