[Day 16] AnimationStart 이벤트

30일간의 Framer 스터디

애니메이션 이벤트 활용

프레이머의 애니메이션에는 이벤트를 추가할 수 있습니다. 애니메이션이 끝난 후 다른 일을 수행하거나 애니메이션이 시작할때 다른 효과를 추가하는 등의 기능을 애니메이션의 이벤트를 사용해서 구현할 수 있습니다. 이번에는 프레이머에서 지원하는 애니메이션의 이벤트에 대해서 배워보고 활용하는 방법을 알아보도록 하겠습니다. 

<그림. 애니메이션 이벤트>

AnimationStart

AnimationStart 이벤트는 애니메이션이 시작될 때를 알려주는 이벤트 입니다. 예를들어 공을 튕기는 애니메이션을 생각해봅시다. 화면의 위쪽에서 공이 아래쪽으로 내려오기 시작하자마자 AnimationStart 이벤트가 호출됩니다. 예제를 만들면서 확인해 보도록 하겠습니다.

(1) 프레이머에서 이미지를 추가합니다. 저는 농구공 모양을 사용했지만 물론 다른 어떤 이미지도 괜찮습니다.

(2) 공 이미지가 포함된 레이어의 이름을 ‘ball’로 변경하고 ‘ball’ 레이어의 속성버튼을 클릭하고 위치와 크기를 화면 상단에 적당하게 배치합니다.

(3)  ‘ball’ 레이어를 클릭하면 애니메이션이 시작되도록 ‘Insert’ - ‘Event’ - ‘ball’ - ’Click’ - ‘Click’ 이벤트를 추가하고 ball.animate 구문을 통해 애니메이션을 추가합니다. 애니메이션이 완료될 속성값은 y:1000으로 입력해줍니다. 디바이스는 아이폰6s 기준입니다. 

(4) 애니메이션 시작 이벤트를 추가하기 위해 ‘Insert’ - ‘Event’ - ‘ball’ - ‘Animation’ - ‘AnimationStart’을 클릭합니다. 그리고 테스트를 위한 코드인 print(‘Animation is start!’) 를 입력합니다.

(5) ‘ball’ 레이어를 클릭하면 화면하단에 ‘Animation is start!’ 라는 문구가 출력됩니다. 문구가 출력이 되는 시점을 보면 공이 아직 원래 위치에 있을때라는 점을 기억하시기 바랍니다.