F#4 lottie animation을 Framer에 적용하기

Lottie Animation에 대해서 정리한 글에 이어서, 이번에는 lottie animation을 활용하여 Framer에 적용해 보겠다.

아래 데모 영상의 애니메이션은 회사 프로젝트 중 어그러진 작업물이라 부분적으로 올려 본다.
음성 명령과 사운드검색을 장면 전환 없이 한 화면에서 동작해볼 수 있게 프로토타이핑 한 것이다.

그럼 시작.

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

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

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

{LottieLayer} = require ‘LottieLayer’

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

#Layer

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

bg = new BackgroundLayer
searchBtn.center()

다음으로, Lottie Animation으로 만든 json파일들을 연결 해 준다.
LottieLayer모듈을 넣었기 때문에 LottieLayer라는 새로운 공구를 쓸 수 있는 듯하다.
아래 속성 중에 direction이라는 속성이 있어서 테스트 해 보았는데, 숫자 값이 -일 경우에는 애니메이션이 역재생 되는 듯한 모습이 보였다. 역시 하라는 대로 하면 뭐가 뭔지 모른다능. (이것은 스터디 후 명확하게 적어보도록 하겠다.)

voiceRecog = new LottieLayer
x: Align.center
y: Align.center
name: “voiceRecog”
path: “images/voice_button.json”
autoplay: true
loop: true
speed: 0.6
direction: 1
parent: searchBtn
width: 120
height: 120
soundRecog = new LottieLayer
x: Align.center
y: Align.center
name: “soundRecog”
path: “images/sound_button.json”
autoplay: true
loop: true
speed: 1.2
direction: 1
parent: searchBtn
width: 110
height: 110

#State

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

#음성인식, 사운드 검색 버튼 스테이트 세팅
iconVoice.states =
default:
x: 47
y: 1
width: 90
height: 90
grayscale: 0
opacity: 1
scale: 1
tap:
x: Align.center
y: Align.center
width: 120
height: 120
grayscale: 0
opacity: 0
soundTap:
grayscale: 100
opacity: 0.4
x: 20
y: + 25
scale: 0.75

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

iconVoice.animationOptions =
time: 0.7
curve: Spring(damping: 0.7)

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

animations = [voiceRecog, soundRecog]
for i in [0…2]
animations[i].states =
on:
opacity: 1
off:
opacity: 0
animations[i].animationOptions =
time: 0.4
curve: Spring(damping: 0.6)
animations[i].stateSwitch(“off”)

#Events

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

#음성명령 버튼 눌렀을 때 모션
“}”>iconVoice.onTap ->
this.animate(“tap”) #설정한 스테이트로 애니메이팅
iconSound.animate(“voiceTap”)
soundRecog.animate(“off”)
“}”>Utils.delay 0.1, ->
voiceRecog.animate(“on”)

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

구현화면보러가기 >

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다