Facebook Keyframe

Facebook에서 Keyframe이라고 하는 라이브러리 및 플러그 인을 공개하였습니다.
(https://facebookincubator.github.io/Keyframes/)

FaceBook 모바일 화면에서 보이는 `좋아요` 애니메이션을 구현할 때 쓰인 라이브러리 인데요.
에프터 이팩트를 사용하여 에니메이션을 만들고 Json 파일로 Export 하여 Android, iOS, Web에서 읽어 애니메이션을 실행하도록 하는
라이브러리를 제공하고 있습니다.

[바로 이런 것들...]

윈도우10, 에프터 이팩트 CC 2017을 기준으로 간단한 사용기를 올려 봅니다.

1.AfterEffects 설정하기

1) 어둠의 경로를 통하던 저처럼 클라우드를 정기구독하시던...우선 Ae를 설치해주세요.
이후 깃텁(https://github.com/facebookincubator/Keyframes)에서 브랜치를 다운 받아 압축을 풀어 줍니다.

여기서 노란색으로 칠해진 파일들을 Ae가 설치된 폴더 안에 스크립트 저장 경로에 새폴더를 만든 후 넣어 줍니다.
(윈도우 기준 C:\Program Files\Adobe\Adobe After Effects CC 2017\Support Files\Scripts)

2) 이후 Keyframes After Effects Scripts\lib\keyframes\AECompToKeyframesAnimation.js 파일을 열어
function warnIfUsingMissingFeature안에 

keyPath.unshift(comp && comp.parentFolder$name);
console.warn('UNSUPPORTED: %s', keyPath.join(' → '));

두 라인을 삭제 합니다. 두 라인을 삭제 하지 않으면 

위와 같은 오류를 뿜으며 스크립트가 실행되지 않습니다. (...뭐지..)
전 js 스크립터가 아닌지라 딱히 무슨 일을 하는 코드인지 정확히는 알지 못하나
어림 짐작으로 지원되지 않는 무언가를 콘솔 로그에 찍는 로직인 것 같습니다.

여튼 없어도 실행은 잘되니 삭제 합니다.

3) Ae를 실행하시고 편집 - 환경설정 - 일반을 선택한 후 아래의 옵션을 체크해 줍니다.

드디어 Ae에서 플러그 인을 실행 할 수 있는 설정이 끝났습니다.

2. Sample aep(에프터 이펙트 프로젝트) 추출해보기

브렌치 압축파일 안에 동봉된 Sample 파일을 실행해 봅니다. 해당 파일은 맥킨토시 64bit에서 생성된 파일이니 다른이름으로 저장하셔야 할 겁니다.
프로젝트를 열고 파일 - 스크립트 - Keyframe-Exporter를 실행해 봅니다.

위와 같은 팝업창이 뜨고 프로젝트에서 컴포지션을 하나 선택한 후
Export를 누르면 파일이 저장된 위치에 Json 파일 두개 와 log 파일이 생성됩니다.

여기서 Kf 붙은 파일이 Android에서 사용하실 수 있습니다.

1. 창이 뜨지 않고 에러가 난다면 1에서 설명한 스크립트를 지우지 않으신 겁니다.
2. Export 라고 뜨고 멈춰 있다면 Ae 에 퍼미션을 주지 않으신겁니다.

3. Android App에 적용시켜보기.

브랜치에 포함된 샘플 프로젝트를 Android Studio에 import하세요. 
또는 git에서 바로 Import하셔도 됩니다.

2에서 추출한 Json파일을 app 프로젝트 내 Assets폴더에 넣어 줍니다. sample 프로젝트에는 위와 같은 파일명으로 되어 있고
파일을 열어서 내용을 교체해 주시면 샘플 프로젝트에서 쉽게 확인 하실 수 있습니다.

주의 하실 점은 브랜치에 포함된 Keyframe 라이브러리를 사용하셔야 합니다.
Jcenter에 올라가 있는 라이브러리를 사용하면 예제 소스가 돌아가지 않습니다. (2017.1.5 기준)

이유는 두 버전 다 1.0 인데 메소드 카운트가 Git이 더 큽니다.
그래서 Jcenter에 올라간 라이브러리에 없는 메소드가 존재합니다.

샘플코드 : https://github.com/facebookincubator/Keyframes/tree/master/android/keyframes-sample

4. Ae에서의 제약사항

나온지 얼마 안된 플러그인 지라 제약사항이 있습니다. 제약사항은 아래와 같습니다.

 - pre-composition 지원하지 않습니다. 그러니까 컴포지션을 모두 따로따로 분리해야 합니다. 

 - 프레임 속도는 정수로 셋팅하세요. 프로젝트 기본 셋팅이 30F 인데 그대로 Export하시면 29.932323099 이런식의 소숫점으로 환산되어 안돌아갑니다. ;;;;;

 - 부모 레이어는 Null 레이어만 가능합니다.

 - Path Merge안됩니다.

 - 컴포지션 하나에 한개의 그룹만 있어야 합니다. 그룹 안에는 1개의 path만 있을 수 있습니다. 그룹안에 path가 2개면 2번째건 표시가 안됩니다.

 - 모양 레이어에 딸려있는 변형 옵션을 사용하시면 안됩니다. 컴포지션에 있는 변형을 써야합니다.

결론은 Path로 일일히 따서 손수 노가다 하시면 됩니다.

자세한 가이드는 https://github.com/facebookincubator/Keyframes/blob/master/docs/AfterEffectsGuideline.md 에서 확인이 가능합니다.

한번 만들어 본 애니메이션...