[CoreAnimation] Ch11. Layer Springs (레이어단의 스프링 애니메이션) + (CASpringAnimation)

Intro

Layer에 스프링을 적용하는 건 UIView에서 적용하던 것과 조금 다르다. 

UIView에서 사용했던건 간략화된 유사-스프링 애니메이션이라고 볼 수 있다. 

하지만 Layer에서 사용하는 스프링은 물리적인 접근을 통해 좀 더 실제 스프링효과를 보여준다. 

Damped harmonic oscillators(시간이 지남에 따라 진폭이 감소하는 진동을 말함) 

실에 매달린 추를 swing시킨다고 생각해보자(물리시간에 진자운동이라고 배웠던 기억이..)

마찰이 없다면, 무한히 추가 왔다갔다 할 것이다. (Harmonic oscillator) 

하지만 실제로는 마찰이 있져?? 

이때는 추가 왔다 갔다 하면서 멈추게 된다. 왔다 갔다 하는 거리도 시간이 지남에 따라 줄어들게 된다. (Damped harmonic oscillator) 

용어정리 

- damping: 마찰력의 정도를 의미한다. damping이 높을수록 추는 빨리 멈추게 된다. 

- mass: 추가 무거울수록, swing하는 시간도 길어진다. 

- stiffness: 지구의 중력을 생각해보자. 중력이 강할수록 추가 빠르게 떨어질 것이다. 

- initial velocity: 추의 swing이 시작될 때, 추를 가만히 손에서 떼는게 아니라 추에 미는 힘을 가한다면 initial velocity가 추가된 것이다. 

이걸 왜 알아봤냐면 Damped harmonic oscillator가 바로 iOS에서 스프링 애니메이션을 구현하는 방식이다. 

UIKit vs Core Animation springs 

UIKit의 스프링애니메이션은 damping, initialVelocity만 사용하였다. 사실 나머지 파라미터는 duration에 맞춰, 시스템이 알아서 만들어준 것이었다. 

CASpringAnimation을 사용하여 Layer에 스프링 애니메이션을 추가할 수 있다. 

이 때, 우리는 duration을 지정할 수 없다. 지정한 파라미터들에 의해 스프링이 알아서 swing하다가 멈추게 된다. 

Damped harmonic oscillators에서 알아본 네 가지 파라미터가 그대로 CASpringAnimation에 적용된다. (damping, mass, stiffness, initialVelocity)

Creating your first layer spring animation 

CASpringAnimation은 CABasicAnimation을 상속받는다. (CABasicAnimation에 추가로 위 4가지 프로퍼티 + settlingDuration(readOnly)프로퍼티를 갖는다.) 

CASpringAnimation을 쓰면서 duration을 직접 입력하면 스프링이 튕기다가 갑자기 애니메이션이 종료되는 현상이 있다. 

위에 언급했듯, 우리가 직접 duration을 지정하면 안된다. 

그렇다고 duration을 지정안하면 어떻게 되냐? 그것도 안됨 ㅋㅋ 

CASpringAnimation에는 settlingDuration이라는 프로퍼티가 있다. readOnly고, 스프링이 튕기는 시간을 예측해서 알려준다. 

duration = springAnimation.settlingDuration

이렇게 duration을 지정해주면 된다. 

settlingDuration을 좀 줄이고 싶다면?? -> damping 값을 높여주자. 

Spring animation properties 

스프링 프로퍼티의 디폴트 값은? 

- damping: 10 

- mass: 1 

- stiffness: 100 

- initialVelocity: 0 

textField의 editing이 끝나면 1포인트만큼 진동을 주는 애니메이션을 추가하였음 

이제 프로퍼티들을 변경하면서 애니메이션에 변화를 줘보자. 

Initial velocity 

Initial velocity가 0이라는 건, 스프링을 시작할 때 어떤 힘도 주지 않고 그냥 놓아주었다.. 라는 뜻이다. (+)값은 스프링 시작방향으로 힘을 밀어준다는 뜻이고, (-)값은 시작방향 반대방향으로 잡아당긴단 뜻이다. 

initialVelocity에 100을 주니, 1포인트 애니메이션에도 불구하고 꽤 많이 움직이는걸 볼 수 있다. 

Mass 

initialVelocity에 100을 줬더니 나아지긴 했다. 하지만, 애니메이션이 좀 짧은게 아쉽다. 

mass를 올려주면 애니메이션의 duration이 길어질 것 같다. mass를 올려주었더니, 길어졌지만 너무 멀리까지 움직인다. 

Stiffness 

initialVelocity와 mass때문에 애니메이션이 시작할 때, 너무 튕겨나가는 느낌이 난다. 

stiffness의 값을 높이면 높일수록 less bouncy한 효과를 낼 수 있다. 반대로  0에 수렴할수록 더 bouncy해진다. 

Damping 

damping을 추가해서 duration을 줄일 수 있다. (0으로 설정하면 swing이 멈추지 않는다) 

Specific layer properties 

UIKit에서 구현할 수 없는 스프링 애니메이션을 구현해보자. borderColor에 대한 애니메이션 구현하기