iOS ) Core Animation

안녕하세요 :) Zedd입니다.

얼마전에, CAGradientLayer를 사용할 일이 생겼었어요!

근데..그냥 그거 아시죠 그냥 스택오버플로우..에서 가져와서...그냥 어 되네! 하고 넘어가는 그..

근데 거기다가 이 코드를 제대로 이해하지 못하고 사용했다는 그..죄책감..찝찝함...

사실 이러면 안되는데..! 

이런 현상(?)에 대한 해결방법은 간단합니다!

공부를 하면댜ㅐㅁ

Core Animation

---

사실 저도 한번은 본적이 있는데 기억이 안나네요? 

https://zeddios.tistory.com/366

간략하게만 봐서 그런가..? 

ㅎ

ㅡ

ㅁ..

위 글에서 Core Animation부분을 가져와볼게요.

Framework - Core Animation의 정의 :

Render, compose, and animate visual elements."

시각적 요소(visual elements)를 렌더링, 합성하고 애니메이션화합니다.

라네요. 

설명도 긁어올라고 했으나..

사실 주저리주저리 Overview쓰면 아무도 안본다는 사실을 난 알고있지 하하

그래서 간단하게 요약하면

- Core Animation은 iOS / OS X에서 사용 할 수 있는 그래픽 렌더링 및 애니메이션 인프라임. 

(Core Animation은 드로잉 시스템 그 자체가 아님에 주의. 하드웨어에서 앱의 컨텐츠를 합성/조작하기 위한 인프라임. 아래에도 나올거지만 Core Animation이 직접 애니메이션을 조작하는게 아니라 실제 드로잉 작업을 하드웨어로 전달하기 때문이에요.)

- Core Animation 인프라의 핵심에는 Layer객체(CALayer)가 있음. 얘는 컨텐츠를 관리/조작하는데 사용됨 (음..이건 먼저 알아두면 좋을 개념이라 미리 말할게요. 레이어 객체는 그래픽 하드웨어로 쉽게 조작 할 수 있도록 비트맵으로 컨텐츠를 캡쳐한답니다.)

- Core Animation을 사용하면 대부분의 작업이 자동으로 수행됨

(시작 및 끝 지점과 같은 매개변수를 구성하고 Core Animation이 시작하도록 지시하면됨)

- Core Animation은 실제 드로잉 작업을 온보드 그래픽 하드웨어로 전달함. (렌더링 작업을 가속화하기위해) -> 그래서 앱의 속도를 저하시키지 않고 높은 프레임속도와 부드러운 애니메이션을 만들 수 있음 :D

iOS -> Core Animation을 니가 아냐 모르냐를 떠나서 사용하고 있음

OS X -> Core Animation을 아ㅏㅏㅏ주 적은 노력으로, 최대한 활용 할 수 있음 

칫..

위에서 볼 수 있듯이 Core Animation은 UIKit / AppKit에 아주 밀접하게 붙어있는 것을 볼 수 있습니다.

음..이까지만 보고 나서 생각이 드는건데..

https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004514

에 Core Animation에 대한 내용이 정말 많이 들어있어요!

근데 이걸 계속 봐야 할까..?하는 고민이 들지만 Core Animation같은 프레임워크는 이런 프로그래밍 가이드를 안보고서는 이해를 못함. 왜냐면 만약에 제가

CAGradientLayer에 대한 그냥 일반적인 document를 봤을 때, 이게 어떻게 동작하는지는 1도 안나와 있기 때문. 어떻게 동작하는지 1도 안나와있다기 보다..이걸 뭐라해야하지? "레이어"에 대한 개념이 없으면 1도 이해를 못합니다. 거기에 이 레이어가 어떻게 동작하는지도 제대로 알 수가 없음. 

하지만 프로그래밍 가이드에는 나와있다는 사실..

여러분 사실 몰라도 됩니다. 몰라도 정말zz 뭐 큰 문제는 없습니다만 그냥 제가 개념충일 뿐..

저도 이 프로그래밍 가이드를 완벽하게 숙지할 생각은 없구요. 제가 필요한 부분만 골라서 공부할 생각입니다. 그러니까 이 글에서 Core Animation 프로그래밍 가이드에 대한 모든 부분을 다룬다!! 이렇게 생각하면 안되구요. 거기에.. 뭐 모든 글에 해당하는 이야기지만 틀린 부분이 있을 수 있다는 점.

저는 그냥 stackOverflow에 있는 코드를 이해하고 싶을 뿐 이에요 하하

Core Animation Basic

---

가이드에 있는 내용을 그냥 제 식대로 요약해서 말하겠습니다.

Animation! 우리가 보통 iOS를 하면서 사용하는 Animation의 정의(?)라고 해야하나 암튼 그런걸 한번 생각해봅시다.

일단 Animation이 일어나려면 뭔가 "변경사항"이 있어야겠죠? 

뭐 위치가 변한다거나 색깔이 변한다거나!!! 그쵸??이건 맞죠

아무것도 안변하는데 애니메이션이 왜 필요하겠어요 그쳐

Core Animation을 사용하여 view의 위치(position), 크기(size) 또는 불투명도(opacity)에 대한 변경사항에 애니메이션을 적용 할 수 있습니다.

당연쓰 

이러한 변경을 수행하면, Core Animation은 프로퍼티의 현재값과 사용자가 지정한 새 값 사이에 애니메이션을 적용합니다.

ㅇㅇㅈ

저기 위에서도 말했듯이, 이 애니메이션의 핵심에는 Layer가 있다고 그랬죠? Layer는 애니메이션과 드로잉을 위한 기초를 제공한다고 해요.

이 Layer를 공부해봅시다.

- Layer객체는 3D space에 구성된 2D surface(표면, 겉보기, 외면..등)로, Core Animation으로 하는 모든 작업의 핵심(heart of everything!!) 입니다.

- Layer는 view와 마찬가지로 surface의 geometry, content 그리고 visual 속성(attribute)에 대한 정보를 관리합니다.

- View와 달리 Layer는 자체 모양?(own appearance)을 정의하지 않습니다. 비트맵을 둘러싼 상태정보를 관리하기만 합니다. 

- 비트맵 자체는 view drawing 자체 또는 fixed image일 수 있습니다. 이러한 이유로, 앱에서 사용하는 기본 Layer는 데이터를 주로 관리하기 때문에 모델 객체로 간주됩니다. 이 개념은 애니메이션의 동작에 영향을 미치기 때문에 기억해야합니다.

이거는 제대로 이해가 안가네욥..기억해야한대서 적어봤음 ㅎ

CALayer의 메소드로 model()이 있네요. 너무 정직한 이름이다

- 대부분의 Layer는 앱에서 실제 drawing을 수행하지 않습니다. 대신, Layer는 앱에서 제공하는 컨텐츠를 캡쳐하여 비트맵으로 캐시합니다. 이 비트맵은 backing store라고 불리기도 합니다.

- 이후에 Layer의 프로퍼티를 변경하면, Layer객체와 관련된 상태 정보(state information)가 변경됩니다.

- 변경사항이 애니메이션을 트리거하면, Core Animation은 Layer의 비트맵 및 상태정보를 그래픽 하드웨어로 전달합니다. (하드웨어에서 비트맵을 조작하면, 소프트웨어에서 수행 할 수 있는 것 보다 훨씬 빠른 애니메이션이 생성됩니다.)

자 위 그림을 보면...App Window에서 뭔가 컨텐츠가 있는데, 그걸 Layer는 비트맵으로 캐시한다고 그랬죠? 그 비트맵이 backing store라고 불린다고 그랬죠?? 그래서 저기 처음 step에 backing store가 적혀있는 것을 볼 수 있읍니다..

두번째 step은 뭔가...음..Layer의 프로퍼티를 변경한 것 같은데요. 아닐수도 있음ㅎ

암튼 Layer의 프로퍼티를 변경해서 45도 rotate가 된 것 같은데 그게 하드웨어 조작이 되는건가? 

그리고 애니메이션을 트리거하면 Core Animation이 하드웨로 비트맵 및 상태정보를 하드웨어로 전달하여 하드웨어가 애니메이션을 수행한다~~ 뭐 이런 과정을 설명하는 그림같습니당.

static bitmap을 조작하므로, Layer기반 drawing은 View 기반 drawing techniques과 크게 다릅니다.

View 기반 drawing을 사용 && View자체를 변경하면. 

==> 새로운 파라미터로 draw(rect: )를 호출하여 다시 그리게(redraw)되는 경우가 빈번함. 

근데 main 쓰레드에서 CPU를 사용해서 다시 그리기 때문에 이런식으로 drawing하면 개빡침 아니 비용이 많이듭니다 :)

근데 우리 Core Animation은 같은 or 비슷한 효과를 얻기 위해, 하드웨어에서 캐시된 비트맵을 조작하기 때문에 이러한 비용(main thread에서 CPU를 사용해서 다시 그리는 비용)을 피합니다.

아 이 글을 도대체 며칠동안 가지고 있는지 모르겠네요. 걍 발행함...

곧 Core Animation에 있는 CADisplayLink를 사용해야 할 일이 생길텐데..

그때까지 열시미 해봅시다.

그래두 CALayer에 대해서 조금 안거 같아서 만족이에요 하하  

~~view.layer.cornerRadius에서 layer가 CALayer랍니다. CALayer는 항상 만지고 있었던거지..