템플릿 애니메이션

템플릿에 모션 효과를 주는 방법을 알아봅니다.

타이머와 함수

모든 애니메이션은 타이머를 기반으로 구현합니다.

코멧의 Timer 블록은 Javascript의 Date.now() 값을 반환합니다.
이 값은 매우 큰 정수로 계속 증가하며, 1초당 증가량은 정확히 1000입니다.

Timer 블록을 만들기 위해 활용하는 핵심 아이디어는 아래와 같습니다.

💡 아이디어

시스템 변수에 Timer 값을 기록하고, (Timer) - (시스템 변수 값)을 대신 사용합니다.
해당 값은 (Timer 값을 기록한 시점으로부터 지난 시간) × 1000을 의미하게 됩니다.

먼저 다음과 같이 두 개의 시스템 변수를 사용합니다.

시스템 변수 목록

일기장 열림 여부: true면 추가 창이 열린 상태, false면 추가 창이 닫힌 상태를 의미합니다.
일기장 열린 시간: 마지막으로 일기장 열림 여부 값이 변경된 시점의 Timer 값

해당 예제에서는 애니메이션 시간을 0.3초로 설정하였습니다.
불투명도 설정 블록을 사용하며, 0이면 완전히 투명해진 상태, 1이면 완전히 불투명한 상태입니다.

먼저 추가 창 열림/닫힘 버튼 구현입니다.

해당 코드는 추가 창을 닫는 버튼의 로직입니다.
추가 창을 여는 경우는 true와 false를 반대로 설정하면 됩니다.

다음으로 실질적 투명도 구현 단계입니다.
(Timer) - (시스템 변수 값)이 0에서 300으로 변하는 동안, 0에서 1로 변하도록 구성해야 합니다.

💡 300의 의미

애니메이션 시간이 0.3초라면, (Timer 값을 기록한 시점으로부터 지난 시간) × 1000은 300이 됩니다.

투명도는 일정하게 변하므로, (Timer - 시스템 변수 값) / 300과 같이 구현하면 됩니다.
반대로 1에서 0으로 가는 경우, 1 - (Timer - 시스템 변수 값) / 300과 같이 구현할 수 있습니다.

따라서 전체 코드는 아래와 같이 구성됩니다.

💡 보이기 / 숨기기 블록 추가 이유

불투명도 0과 숨기기 상태인 상태는 아래와 같은 차이점이 있습니다.

불투명도 0: 렌더링은 유지됩니다. 오브젝트 클릭 역시 감지합니다.
숨기기: 오브젝트 렌더링을 배제합니다. 오브젝트 클릭이 무시됩니다.

단순 (Timer - 시스템 변수 값)은 일정하게 증가합니다.
움직이는 오브젝트의 스크립트를 투명도 효과 예제처럼 설정할 경우, 부자연스럽게 올라오다가 멈추게 됩니다.

부드러운 움직임을 위해서는 (Timer - 시스템 변수 값)이 증가하는 속도가 점점 느려져야 합니다.
이러한 개념을 Easing이라고 하며, 해당 가이드에서는 개념적인 내용만을 다룹니다.

가장 간단한 Easing으로 sin 함수가 있습니다.
0에서 90까지 일정하게 증가하는 x 값을 넣으면, 그 값은 0에서 빠르게 시작해 1에서는 느려지게 됩니다.

만약 0.3초 동안 작동하게 하고자 한다면,
sin의 입력 값으로 (Timer - 시스템 변수 값) × 90 / 300을 대입해 주면 됩니다.
해당 값은 0.3초 동안 0부터 90까지 일정하게 증가하는 값을 만들게 됩니다.

0.3초 동안 Y좌표를 720에서 360으로 올라오게 하고 싶다면, 아래와 같이 구현할 수 있습니다.

Y 좌표 설정: 720 - 360 × sin((Timer - 시스템 변수 값) × 90 / 300)