[Day 10] 애니메이션 속성 패널 사용하기

30일간의 Framer.js 스터디

애니메이션 속성 패널 사용하기

애니메이션 기능중에 애니메이션 속성 패널을 이용하면 애니메이션 관련 속성을 손쉽게 변경 할 수 있습니다. 기능이 많지는 않으므로 간단하게 알아보도록 하겠습니다.

<그림. Layer Animation 생성>

먼저 레이어를 생성하고 Layer Animation을 클릭해서 애니메이션을 만듭니다. 



<그림. 애니메이션 패널 선택>

그리고 중앙의 패널을 보시면 위쪽에 두개의 패널이 있습니다. 왼쪽은 레이어 속성 패널이고 우측이 애니메이션 속성 패널입니다. 애니메이션 탭을 선택합니다. (만약 가운데 패널이 보이지 않는다면 레이어나 애니메이션이 선언된 코드의 좌측에 있는 작은 패널 버튼을 누르시면 됩니다.)

애니메이션 패널에서 설정할 수 있는 속성은 Curve , Time , Delay , Repeat , Color 입니다. 커브중에서 Spring 속성을 선택하면 추가로 Tension , Friction, Velocity 값도 설정가능합니다.

Curve: 가감속 그래프 설정(Linear: 가감속없음, Ease: 서서히 나왔다 서서히 감속, Ease-In: 서서히 등장 , Ease-Out: 서서히 퇴장, Spring: 탄력있게)

Time: 애니메이션이 동작되는 총 시간

Delay: 애니메이션이 시작되기 전 대기시간

Repeat: 애니메이션 반복 횟수

Color: 색 공간 체계 선택(RGB,HSL,HUSL)

색상을 애니메이션 할때 이 색공간을 다르게 하면 중간에 전환되는 컬러가 달라집니다. 

RGB는 빨강색,녹색,파란색의 조합으로 색상을 만드는 체계이고 HSL과 HUSL은 색,채도,명도 등으로 조합해서 색상을 만드는 체계입니다. 기본적으로 웹에서 익숙한 RGB를 선택하시면 되고 다른 색상체계에 대해 아신다면 HSL과 HUSL을 선택해서 테스트 해 보시기 바랍니다.