본문 바로가기

DeVsign

Framer 도전기 #4 Lottie를 Framer에 적용하기

전편에 이어서, 이번에는 lottie animation을 활용하여 Framer에 적용해 보겠다. 아래 목업의 애니메이션은 회사 프로젝트 중 어그러진 작업물이라 부분적으로 올려 본다. 음성 명령과 사운드검색을 장면 전환 없이 한 화면에서 동작해볼 수 있게 프로토타이핑 한 것이다. 




그럼 시작. 

첫번째로 Illustrator에서 오브젝트를 제작한 후 After Effect에서 애니메이션을 제작, BodyMovin 플러그인을 이용하여 json data파일을 뽑아낸다. 하나는 음성을 듣는 중이라는 애니메이션, 또하나는 음표의 잔상이 남는 애니메이션이다. 두 개의 json date 파일은 작업하고 있는 Framer프로젝트의 images폴더 안에 넣어 둔다. 

프레이머의 디자인 탭에는 음성 명령(말풍선 메타포, iconVoice), 사운드 검색(음표 메타포, iconSound)의 두 가지 오브젝트와, 둘을 묶어준 영역인 searchBtn 을 준비한다. 참고로 이것은 스케치앱에서 copy & paste 한 것이다.(여기서 잠깐, 이게 종종 영역만 붙고 오브젝트 자체는 붙이기가 되지 않는 경우가 있다. 왜 이러는지는 모르겠다.) 


위의 링크에서 LottieLayer.coffee를 다운로드 받은 후, 작업할 프레이머 프로젝트의 modules 폴더에 넣고, 프레이머 코드탭 상단에 아래의 문구를 넣어준다. 




그다음 Layer, State, Event를 차례대로 세팅한다. 

#Layer 

디자인탭에서 오브젝트를 미리 준비했기 때문에 레이어링은 많이 필요하지 않았다. 오브젝트들이 있을 bg영역을 만들어주고, searchBtn이라는 그룹을 화면의 가운데에 정렬해준다. 



다음으로, Lottie Animation으로 만든 json파일들을 연결 해 준다. LottieLayer모듈을 넣었기 때문에 LottieLayer라는 새로운 공구를 쓸 수 있는 듯하다. 

아래 속성 중에 direction이라는 속성이 있어서 테스트 해 보았는데, 숫자 값이 -일 경우에는 애니메이션이 역재생 되는 듯한 모습이 보였다. 역시 하라는 대로 하면 뭐가 뭔지 모른다능. (이것은 스터디 후 명확하게 적어보도록 하겠다.) 




#State 


말풍선 버튼의 state는 아래의 세 경우이다. 1. 기본상태 2.스스로를 tap했을 때 3.음표 버튼을tap 했을 때 1번 기본 상태가 필요한 이유는, 음표 버튼을 tap한 후 다시 말풍선 버튼을 눌렀을 때 제자리로 돌아와야 하기 때문이다. 스스로를 tap했을 때는 부모 레이어인 searchBtn을 기준으로 center로 위치하도록 하고 버튼의 사이즈를 키워준다. 음표 버튼을 tap했을 때는 말풍선 버튼이 반투명한 회색으로 바뀌고 사이즈도 줄어들도록 하였다. 



사운드 검색 버튼(음표)도 동일하게 세팅한다. 두 버튼 모두 애니메이션이 필요하므로, 애니메이션 옵션은 아래와 같이 세팅한다. 



앞서서 음성 명령, 사운드 검색의 애니메이션에 이름을 지정해둔 바 있다. voiceRecog, soundRecog 이 두 가지 항목을 animations라는 이름의 통에 묶어 준다. 그리고 이 두 애니메이션의 state를 지정해 주고, 두 개 모두 off상태로 변경해준다(보이지 않아야 함)


 


#Events 

레이어와 스테이트에 대한 세팅이 끝났다. 이제 양 쪽 버튼을 눌렀을 때 벌어지는 이벤트에 대해 세팅해 보겠다. 자신을 눌렀을 때에 대한 state값인 “tap”으로 animate시켜준다. 0.1초 후 음성인식에 대한 애니메이션을 보여주기 위해 on상태로 바뀌도록 해 준다. 


사운드 버튼도 동일하게 세팅하면 완성!