CAKeyframeAnimation 대하여

작년 WWDC 2016에서 iOS10 부터 작동하는 새로운 Animation 클레스를 발표 했다.

그의 이름은 UIViewPropertyAnimator라고 불리우는 녀석인데 

뷰의 애니메이션처리를 동적으로 할수 있고 대화형 애니메이션으로 사용자 정의 및 처리를 훨신 수월하게 할 수 있다고 한다.

하지만 오늘 포스팅할 내용은 이녀석이 아니라 

CAKeyframeAnimation이라는 클래스이다.

요 클래스는 UIViewPropertyAnimator나오기 이전, 아니 지금도 복잡한 애니메이션을 처리하는데 많이 사용중임에도 불구 하고 국내에서 자료를 거의 찾기 힘들다 (다시 찾아보니 많이 나온다.. 쳇)

사실예전에는 UI요소에 애니메이션효과를 넣을 필요가 거의 없었는데 (거의 기본)

요즘 트렌드가 트렌드이다보니 은근 자주 찾게 되는 것 같다.

그래서 이번 포스팅은 CAKeyframeAnimation클래스를 파해쳐 보기로한다

UIViewPropertyAnimator는 나중에.. (아 귀찮)

CAKeyframeAnimation클래스는 이름 앞쪽에 나와있듯이 Core Animation을 기반으로 한 클래스이다.

Core Animation을 기반으로 한 클래스는  CAKeyframeAnimation외에 CABasicAnimation과, CATransition이 있다.

CABasicAnimation은 이름처럼 layer의 기본적인 애니메이션을 처리 할때 사용하고 

CATransition은 layer의 전환 즉, 화면이 이동이 되어 없어지거나 새로이 나타날때 사용한다.

CAKeyframeAnimation은 애니메이션을 keyFrame단위로 쪼개어 각각의 keyFrame마다 효과를 주거나 다른 애니메이션을 하도록 설정할수 있는 녀석이다.

그냥 조금더 복잡한 애니메이션처리를 하는 클래스 라고 생각 하면 된다

사용 환경은 다음과 같다.

Xcode 8.2.1

Base SDK 10.2

Swift 3.0.1

먼저 애니메니션의 대상이될 검은색 배경의 UIView를 하나 추가하자 

그리고 애니메이션을 명령을 위한 버튼 두개도 추가하자

CAKeyframeAnimation의 기본적인 사용방법은 이렇다

class ViewController: UIViewController { @IBOutlet weak var aniView: UIView! @IBAction func startTap(_ sender: Any) { self.playAnimation() } @IBAction func stopTap(_ sender: Any) { self.stopAllAnimation() } } // MARK: - CAKeyframeAnimation 기능 private extension ViewController { func playAnimation() { let animation: CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "transform.scale") animation.repeatCount = .infinity animation.duration = 2 animation.calculationMode = kCAAnimationLinear animation.keyTimes = [0, 0.2, 0.4, 0.6, 0.8, 1] animation.values = [0, 1, 1.5, 1, 0.75, 1] self.aniView.layer.removeAllAnimations() self.aniView.layer.add(animation, forKey: "transform.scale") } func stopAllAnimation() { self.aniView.layer.removeAllAnimations() } }

대략적인 설명을 하자면 2라인은 위의 UIView를 IBOutlet으로 선언하고 3~5, 6~8라인은 각각 Start와 Stop버튼의 액션을 선언해준것이다.

그리고 12~28라인은 CAKeyframeAnimation의 기능을 적은것인데

14라인은 init하며 원하는 애니메이션을 Path를 적는다

15라인은 반복횟수 .Infinity는  무한반복하겠다는 뜻이다. Defaults는 0이다

16라인은 애니메이션 재생길이 단위는 초단위이다 역시 Defaults는 0이다

17라인은 애니메이션의 모드를 결정한다 

조금 설명을 추가하자면 여러가지 설정을 할 수가 있는데 설정할 수 있는 모드는 다음과 같다 

kCAAnimationLinear, kCAAnimationDiscrete, kCAAnimationPaced, kCAAnimationCubic, kCAAnimationCubicPaced

각각을 설명하자면 

kCAAnimationLinear는 KeyFrame간의 위치를 직선으로 이어 간다고 생각 하면 되고 

kCAAnimationDiscrete는 KeyFrame간의 위치를 즉각 반응하며 이동하고

kCAAnimationPaced는 정해진KeyFrame의 평균치를 구해 위치를 재구성하여 kCAAnimationLinear로 이동하는것이고

kCAAnimationCubic은 KeyFrame간의 위치를 직선이 아닌 포물선의 형태로 최대한 부드럽게 이동한다 

마지막으로 kCAAnimationCubicPaced는  kCAAnimationPaced로 재설정된 위치를 kCAAnimationCubic으로 이동한다.

18라인은 재생시간동안 프레임을 얼마나 나눌지 정하는곳이다 

최소 0 최대 1을 기준으로 원하는만큼 쪼갤수 있다

19라인은 위의 keyTimes로 쪼갠 Frame에 원하는 scale을 지정 하면 되다 

14라인에 Path가  Scale이기 때문에 value값 역시 scale에 대한 값을 넣으면 되고 자신이 포지션이나 컬러값을 바꾸고 싶다면 Path와 함께 value값을 지정해주면된다

21, 22라인은 기존의 애니메이션을 모두 지운후 위에 만든 애니메이션을 추가 하겠다는 것이다.

마지막으로 26라인은 stop버튼을 눌렀을씨 종료 하는 내용이다

돌려보면 다음과 같다

<gif라 프레임이 끊긴다 원래는 부드럽>

다시정리하면 Start버튼을 누르면 PlayAnimation이 호출이 되고 CAKeyframeAnimation을 생성하여 만든다 그속성은

무한반복 되며 2초의 시간을 가진 애니메이션이 KeyTimes속성을 사용해 6개로 쪼개어 각 쪼개진 위치(시간개념)마다 원하는 scale을 Linear모드로 재생시킨다

다시 Stop을 누르면 모든 애니메이션을 종료한다

애니메이션이 진행되는동안 시간단위로 원하는 만큼 쪼개어 속성과 값을 바꿀수 있다는 것 이다

여기서 중요한건 쪼갠값 만큼 values도 같은 수로 적용 해야 하는 것 인데 쪼갠값이 6개면 values도 6개로 지정 해줘야 원하는 동작을 할수 가 있다. 그렇다고 꼭 6개를 필수로 넣을 필요는 없다 안넣으면 안넣은만큼 동작을 안하는것뿐 앱이 크래시 될일은 없다

소스엔 없지만 timingFunctions라는 속성도 있다 이는 쪼갠 keyFrame마다 동작하는 애니메이션의 option을 지정해줄수 있는데 EaseIn, EaseOut, Linear등이 있다. 

init할때 path를 scale뿐아니라 postion 이나 backgroundColor 등 다양한 애니메이션 옵션이 있으니 원하는 대로 설정 하여 구현할 수 있다.