[CoreAnimation] Ch10. Groups and Advanced Timing (애니메이션 그룹과 커스텀 타이밍)

Intro

지금까지 layer animation을 전부 independent하게 추가하였다.

하지만 여러 애니메이션을 syncronous하게 할 수 있다. 이게 바로 animation groups이다.

CAAnimationGroup

CAAnimationGroup는 CAAnimation을 상속받는다. 

즉, 우리가 지금까지 사용했던 CABasicAnimation의 모든 프로퍼티가 사용가능하다. beginTime, duration, fillMode 등

AnimationGroup에서 설정한 beginTime, duraiton, fillMode등은 그룹에 속한 애니메이션 객체에 적용된다. 

따라서, 그룹에 추가할 애니메이션을 설정할 때, 굳이 위 값들을 설정해주지 않아도 알아서 적용된다.

Animation easing

UIView에서 봤던 easing과 동일하다. syntax만 다를뿐!

CAMediaTimingFunction은 미리 몇가지 easing을 제공하고 있다.

- kCAMediaTimingFunctionLinear

- kCAMediaTimingFunctionEaseIn: 처음에 느리고 마지막으로 갈수록 빨라짐

- kCAMediaTimingFunctionEaseOut: 처음에 빠르고 마지막에 느려짐

- kCAMediaTimingFunctionEaseInOut:느리게 출발해서 빨라졌다가 다시 마지막에 느려짐

깜짝퀴즈 - 물건을 떨어뜨리는 애니메이션은 어떤게 가장 어울릴까? 정답은 EaseIn

사용은간단하다.

groupAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)

베지어 곡선을 사용한 커스텀 타이밍 펑션을 만들 수 도 있다. CAMediaTimingFunction(controlPoints:_:_:_:) 참조

More timing options

Repeating animations

repeatCount는 애니메이션이 반복되도록 한다.

예를 들어, 아래 코드는 flyLeft애니메이션을 4회 반복한다.

flyLeft.repeatCount = 4

하지만 애니메이션 반복에 빠지면 섭한게 있다.

flyLeft.autoreverses = true

이렇게 설정하면 애니메이션이 왔다갔다 한다.

애니메이션이 왕복하다가 마지막엔 편도로 끝나게 하고싶다면?

repeatCount = 2.5 처럼 .5를 추가할 수도 있다.

Changing the animation speed

speed프로퍼티를 변경하면 애니메이션의 속도가 변경된다.

speed프로퍼티는 CAAnimation에도 있고, CALayer에도 있다. 디폴트는 1. (1배속이라는 뜻)

(speed는 CAMediaTiming이라는 프로토콜에 속하고, CALayer, CAAnimation 둘 다 이를 따르고 있음)

CAAnimation의 speed를 변경하면 그 애니메이션의 속도가 변경된다.

CALayer의 speed를 변경하면 그 레이어에 속한 모든 애니메이션의 속도가 변경된다.

Challenge1.

타이틀헤더와 텍스트필드를 Animation group을 사용해서 구현해보기