[Day 9] 레이어 애니메이션 추가

30일간의 Framer.js 스터디

프레이머는 코드기반의 툴이기 때문에 애니메이션도 역시 코드를 알고 있다면 그냥 코딩으로 만들수 있습니다. 하지만 프레이머 메뉴에 'Layer Animation' 이라는 항목이 추가되어 이제 간단하게 애니메이션을 만들 수 있습니다.

[탭매뉴 - Layer Animation - 원하는 레이어 선택]

<그림. Layer Animation 메뉴>

탭에서 'Layer Animation' 항목을 선택하면 레이어 목록이 나옵니다. 레이어를 선택하면 그 레이어에 기본 애니메이션 코드를 아래처럼 자동으로 만들어줍니다.



<그림. 자동으로 만들어진 애니메이션 코드>

기본 코드를 먼저 살펴봅니다. Options 라는 구문아래에 time 과 curve라는 값이 보이실 겁니다. 타임은 애니메이션이 진행되는 시간입니다. time 값은 초단위입니다. time:1이면 1초동안 지정한 애니메이션이 돌아가고 멈춥니다. Curve 값은 가감속 그래프입니다. Linear, Ease , Ease-In , Ease-Out , Spring등의 값이 있습니다. 우선은 이대로 두고 속성값부터 설정해보겠습니다.

애니메이션 변할 속성값 지정하기

레이어의 속성값을 속성패널에서 정하듯 애니메이션의 변할 속성값도 속성패널에서 변경 할 수 있습니다. 그림과 같이 애니메이션 구문을 클릭하면 레이어 속성처럼 좌측에 패널 버튼이 등장합니다. 이 작은 버튼을 누르면 가운데 속성 패널이 열리고 여기서 값을 변경해보겠습니다. 원하는 속성을 속성패널과 결과패널에서 마음껏 조절해보세요.



<그림. 애니메이션 속성 값 조절>

여기서는 가로,세로,크기 등을 조절했습니다. 그리고 지금 애니메이션을 테스트하기 위해서는 우측 상단의 Reload 버튼을 누르시기 바랍니다. 테스트 해보면 처음 레이어 상태에서 애니메이션이 잘 되는것을 볼수 있습니다.

레이어 애니메이션으로 간단하게 애니메이션을 추가해보았습니다. 나중에 클릭,탭등의 여러 이벤트에 추가할때도 이 기능으로 기본 코드를 만들어 놓고 추가하면 편하게 작업이 가능합니다. 여러가지 애니메이션을 테스트해보시기 바랍니다.  

다음에는 애니메이션 속성 패널에 대해 공부해보겠습니다.