Framer에서 Bodymovin 활용하기

Aftereffects 소스를 프로토타입에 넣어보자

작년 말 VR keyboard prototype을 시작으로 약 6개월째 코드 지식이라고는 비루하기 짝이 없는 내가 Framer를 나름대로 꾸준히 하고 있다. (공부하는 방법에 대해서는 나중에 따로 글을 정리할 계획이다.) 

VR Prototyping_Demo

생각하는 거의 모든 인터랙션을 구현할 수 있는 것은 Framer의 널리 알려진 장점이긴 하나, 몇몇 인터랙션은 수학적 지식이 필요한 것도 있고 (Math object들의 압박 ㅎㄷㄷ) 예상하는 것만큼 생각한 대로 구현되지 않는 것들도 있어 (이것은 내 코드 능력의 한계일 가능성이 더 높다.) 원하는 느낌을 살리기 위해서는 Aftereffects 같은 애니메이션 구현 툴에 의존할 수밖에 없었다. 

그래서 떠 올린 것이 Lottie 라이브러리와 Bodymovin이었고 Framer에 적용할 수 있는 방법이 있는지 찾아보게 되었는데

Lottie로 개발자랑 친해지기

역시나 모듈이 있다. Repo에 있는 파일을 다운로드하면 BodymovinLayer.coffee 모듈 파일이 생성되는데, Framer module 폴더에 넣으면 BodymovinLayer를 생성할 수 있다. 커스터마이징 할 수 있는 옵션들은 아래와 같다. 

customAnim = new BodymovinLayer
        name: "customAnim"
        path: "images/animation.json"
        autoplay: true
        loop: true
        speed: 1
        direction: 1

Bodymovin 익스텐션으로 추출한 json 파일을 Path에 매핑시키면 되는데, json파일이 Framer > images폴더에 포함되어 있어야 하며, 만약 추출한 AE 프로젝트에 이미지가 포함되어 있을 경우 bodymovin에서 생성되는 images 폴더도 함께 framer > images 폴더에 넣어놔야 한다. (framer > images > images 이렇게 되는 셈)

써 본 결과 Bodymovin로 추출 가능한 애니메이션은 Framer에서 문제없이 구동이 되며 .play, .stop, .pause등의 메소드들로 다른 오브젝트들과의 인터랙션도 가능하다. 진짜 Framer는 안 되는 게 없는 것 같다.