[iOS] Core Animation 사용하기

    미려한 UI를 위해선 아름다운 효과는 필수이다. 하지만 아름다운 효과를 위해 animation을 무리하게 사용하면 main thread에 너무 많은 작업을 가중시킨다. 미려한 UI를 위해 animation을 사용하되, main thread에 작업을 가중시키지 않기 위해 무엇을 해야할까? 그 방법 중에 하나가 UIView대신에 Layer를 이용한 animation의 구현이다. UIView는 이벤트 입력을 받을 수 있는 View의 전체를 이동하는 반면, Layer는 View의 UI 표시영역만 사용하게 된다. 이를 이용한 animation은 main thread의 부담을 덜어주게 된다. UI 표시영역, 즉 비트맵 상의 이미지만 움직이기 때문에 소프트웨어적으로 drawRect:를 통해 다시 그리지 않고 비트맵 이미지만 변화시키기 때문이다. 그럼, Core Animation에 대해 알아보자.

    먼저 animation의 종류를 알아보자. Core Animation은 CAAnimation이라는 추상클래스를 사용한다. 그럼, 이를 상속받아 구현된 클래스를 알아보면 Core Animatnion의 종류에 대해서 알 수 있음을 직감할 수 있다.

    CAAnimaiton을 상속 받는 친구들은 위와 같이 3개가 있다. CAAnimatonGroup, CAPropertyAnimation, CATransition이 있다. 앞부터 알아보자면 CAAnimationGroup은 여러 animation을 묶어서 동시에 수행하도록 해주는 친구이다. 이제 무엇보다 Core Animation의 중심이 되는 CAPropertyAnimation에 대해서 알아보자.

CAAnimation 끝판왕. CAPropertyAnimation

    실제 Core Animation을 다루는 부분에서 가장 많이 쓰이는 것이 CAPropertyAnimation이다. 그런데 중요한 점은 CAPropertyAnimation도 추상클래스라는 것이다. 그럼, CAPropertyAnimation을 상속 받는 친구들부터 알아보자.

    CAPropertyAnimation을 상속 받는 친구는 둘이 있다. CABasicAnimation과 CAKeyframeAnimation이다. 이 둘은 추상 클래스가 아니기 때문에 역할과 사용법을 알아보자.

CAPropertyAnimation의 자식, Property의 마술사 CABasicAnimation

    CABasicAnimation은 keypath를 이용해 property의 값을 변경하는 animation을 구현할 수 있다. property의 값을 설정하기 위해서 fromValue, byValue, toValue를 사용하게 되는데, 이 3개의 상관 관계를 알아야 효과적인 animation을 적재적소에 구현이 가능하다.

    1. fromValue와 toValue 사용 : 해당 property가 fromeValue에서 toValue로 변한다.

    2. fromValue와 byValue 사용 : 해당 property가 fromeValue에서 (fromValue+byValue)로 변한다.

    3. byValue와 toValue 사용 : 해당 property가 (toValue-byValue)에서 toValue로 변한다.

    4. fromValue만 사용 : 해당 property가 fromValue에서 animation전에 설정되있던 현재 값으로 변한다.

    5. toValue만 사용 : 해당 property가 animation전에 설정되있던 현재 값에서 toValue로 변한다.

    6. byValue만 사용 : 해당 property가 animation전에 설정되있던 현재 값에서 (현재 값+byValue)로 변한다.

    7. 아무 값도 설정하지 않은 경우, 해당 property의 직전 값에서 현재 값으로 변한다.

    위와 같은 규칙을 이용하여 생성한 animation으로 Layer의 property를 변화 시키면 된다. 사용법을 알아보자면 아래의 이미지를 참고하도록 한다. 아래의 이미지는 Layer를 y축을 중심으로 rotation하는 animation이다.

CAPropertyAnimation의 자식, Sequence의 마술사 CAKeyframeAnimation

    CAKeyframeAnimation의 경우엔 해당 property의 값을 연속적으로 바꾸는 animation을 사용하는 클래스이다. 먼저, 해당 property의 값의 변화를 NAArray에 다는다. 각 값의 변화 주기는 keyTimes라는 CAKeyframeAnimation의 property에 NSArray로 설정한다. 단, 전체 변화 주기를 0.0~1.0까지로 가정하고 각 변화 주기를 분할한다. 값은 부동소수점이여야 하며 이전값보다 크거나 같은 값이 다음 값으로 와야한다. 그리고 전체 animation의 duration을 설정하면 된다. 아래의 예제를 보며 처음부터 되짚어보면 이해가 빠를 것이다.

이미지의 변화 CATransition

    CATransition은 이미지의 전환을 필요하는 animation을 지원하는 클래스이다. duration을 설정한 후, animation을 실행시킨다. 해당 Layer의 이미지에 변화를 주면 CATransition은 해당 이미지의 변화에 맞게 자연스러운 animation을 제공하게 된다.

Core Animation mechanism, CATransaction

    Core Animation은 아래 2가지 타입의 transaction을 지원한다. 여기서 설명하려는 CATransaction은 두번째인 'explicit transaction'에 해당한다.

    

    1. Implicit transaction : 명시적인 transaction의 사용이 없이 Layer tree를 직접 수정하면 자동으로 수행된다.

    2. Explicit transaction : Layer tree의 수정을 실행하기 전에 CATransaction에 'begin' 메시지를 전달하고, 수정이 완료     

                                        되고 나서 'commit' 메시지를 보낸다. 명시적으로 CATransaction에 animation의 사용을 알림

                                        으로써 animation과 관련된 property와 animation이 사용됨을 알리고, animation 완료 이후        

                                        의 로직을 정의할 수 있다.

    CATransaction에서 설정할 수 있는 animation property의 종류는 duration, timing function, disable action, completion block을 제공한다.

출처 : https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html