[Day 8] 애니메이션 기초

30일간의 Framer.js 스터디

프레이머에서 레이어의 속성이 바뀔때 부드러운 전환 효과를 주기 위해서 애니메이션을 사용합니다. 예를 들어 이미지가 다른 이미지로 바뀔때 순간적으로 바뀌는것보다는 부드럽게 사라지면서 등장한다거나 배경색상을 변경하는 행동을 할때 색상이 자연스럽게 섞이면서 전환되면 더욱 멋스럽게 보이게 됩니다. 이번에는 애니메이션 기초에 대해 공부해 보겠습니다.

애니메이션 기본 속성들의 개념 

이번 장은 애니메이션에 대해 설명합니다. 프레이머를 쓰면서 차근차근 알아볼 예정이니 슥 읽어 보시고 잘 몰라도 아 그렇구나 하고 넘어가시면 됩니다. 

애니메이션은 몇가지 기본 규칙이 있습니다. 이건 프레이머에서만 쓰는건 아니고 애니메이션을 사용하는 코딩에서 거의 공통으로 사용되는 내용이니 잘 알아두면 좋습니다. 

애니메이션은 어떤 것의 속성값이 현재 값에서 다른 값 변하는데 순간적으로 변하지 않고 정해진 시간동안 부드럽게 변하는 것이라고 생각하시면 됩니다.



<그림. 애니메이션 기본>

위 그림처럼 크기를 예를들면 농구공과 시간, 원하는 크기가 필요합니다. 현재 크기 100은 이미 그 상태에 있기 때문에 적어줄 필요가 없고 변경할 값인 크기 300만 적어주면 됩니다. 아래와 같이 설명할 수 있습니다.

(1) 애니메이션 대상: 애니메이션이 될 어떤 것. 프레이머에서는 레이어가 되겠죠.

(2) 변할 속성 값: 애니메이션은 현재 속성값에서 다른 속성 값으로 서서히 변하는 것입니다. 예를들어 현재 크기가 100일때 이를 애니메이션을 하려면 레이어가 변할 크기를 정해줘야 합니다. 그리고 가로크기, 가로 위치, 크기, 스케일, 회전 등등 거의 모든 속성은 애니메이션이 가능합니다. 속성은 1개만 바꿀수도 있고 여러 속성을 동시에 애니메이션 할수 있습니다. 

(3) 진행 시간: 얼마만큼의 시간동안 결과 속성값으로 변할지 정합니다. 예를들어 크기를 50에서 100으로 바꾸는데 진행시간을 1로 하면 1초동안 크기가 서서히 50에서 100으로 변하고, 60이라고 하면 60초동안 서서히 변합니다.

그외 애니메이션 속성들

위 3가지만 알아도 기본 애니메이션이 가능합니다. 그 외에 중요한 요소로 시작 지연 시간(Delay) , 반복횟수(Repeat) , 가감속(Curve) 등이 있습니다.



<그림. 딜레이는 로켓 카운트다운과 비슷하다>

(4) 시작 지연 시간 (Delay): 딜레이를 걸면 애니메이션이 바로 시작되지 않고 지정한 시간만큼 대기했다가 시작합니다. 사진처럼 로켓 발사할때 카운트다운하는 시간과 비슷하다고 생각하시면 됩니다. 카운트다운 하는 동안은 진행하지 않고 대기중인것과 비슷하죠.

(5) 반복횟수 (Repeat): 애니메이션을 정해진 횟수만큼 반복합니다.

<그림. Ease-In-Out 커브 그래프>

(6) 가감속(Curve): 커브는 가속과 감속을 말합니다. 명칭이 커브인 이유는 이 가감속을 위 그림처럼 그래프로 표현하기 때문입니다. 어떤걸 써야할지 잘 모른다면 서서히 감속하는 Ease - Out 속성값을 찾아쓰면 가장 무난합니다. 대표적인 커브들은 계속 똑같이 움직이는 Linear , 점점 빨라지는 Ease-In , 점점 느려지는 Ease - Out , 빠르게 등장했다가 완만하게 멈추는 Ease - In - Out,  반동을 주는 Spring 등이 있습니다. 공부하거나 연습할때는 Spring 이 튕기는 맛이 있어 사용할때 재미있지만 실제 프로젝트에서는 Ease - In , Out , In - Out 등이 많이 쓰입니다.



* 더 궁금하신 분은 보세요 

위 커브 그래프의 그림을 보면 가로는 시간, 세로는 변할 속성 값입니다. 가운데 그래프를 보면 처음에는 완만하다가 중간쯤 급격히 그래프가 치솟아 오릅니다. 그리고 끝날쯤에는 다시 완만합니다. 이걸 레이어의 가로 위치 이동이라고 생각한다면 어떨까요? 처음에는 슬슬 이동하면서 점점 빨라지고 끝날때쯤에 다시 서서히 도착하게 됩니다. 아래 여러가지 다른 그래프도 어떻게 움직일지 예상해보세요.

<그림. 여러가지 커브그래프>

프레이머에서 애니메이션을 추가할 수 있는 부분 

프레이머에서 에니메이션은 레이어와 나중에 배울 State(상태)에 추가할 수 있습니다. 결과적으로 모두 레이어가 애니메이션이 되는것이지만 둘의 차이는 다음과 같습니다.

(1) 레이어에 애니메이션 줄때

"레이어에 이 애니메이션을 당장 실행시켜라!"

(2) 상태(State)에 애니메이션 줄때

"이 상태(State)로 바뀔땐 애니메이션을 이렇게 주고 저 상태(State)가 될때는 애니메이션을 저렇게 주라고 미리 알려둬라!"

지금은 대충 이 정도의 차이라고 생각하시면 됩니다.

그럼 다음 장부터 프레이머 레이어 애니메이션에 대해 차근차근 알아보겠습니다.