[Lottie] JSON 애니메이션 파일 공유 커뮤니티 - LottieFiles



애펙 애니메이션을 JSON으로 바꾸어 여러가지 플랫폼에 적용할 수 있게 해주는 Lottie 플러그인의 웹사이트 LottieFiles

요기 가면 애니메이션 테스트 뿐만 아니라 유저들이 올린 파일을 마음껏 다운 받을 수 있다.

실제 업무에서는 새로운 애니메이션 이펙트가 필요할 경우, 

개발자님이 이 사이트에서 대략 비슷한 느낌 혹은 그냥 본인이 자주 보기에 좋은 (맘에 드는) 이펙트를 다운받아 적용해 놓으시면

나는 그 화면 내에 적용된 더미를 보고 새로운 애니메이션 파일을 만들어 드리는 식으로 작업한다

여러모로 도움을 많이 받는 사이트라 나도 연습도 할 겸, 누군가에게 도움이 되고 싶기도 하고, 또 은근히 우리 앱 키워드를 끼워넣어서 홍보도 할겸 로티파일 커뮤니티에 파일을 올리기 시작했다. 


https://www.lottiefiles.com/

파일을 업로드하면 몇시간~ 몇일 내로 관리자의 승인이 나게 되고, 로티파일 웹사이트와 로티 앱이 애니메이션 리스트에 보이게 된다

기본적으로는 JSON 파일을 올리게 되어있고, Aep 애프터 이펙트 파일을 같이 올리면 맘껏 수정해서 쓰시오! 라는 뜻이 된다

만들기 귀찮은 자잘한 이펙트는 Aep 파일로 받아두었다가 참고해서 만들기에 좋다



일단은 UFO 모양 때문에 범용적으로 쓰이기엔 적합하지 않을 거라는건 알지만 당분간은 앱 내에서 쓰인 디자인 위주로만 업로드하고,

 일반적인 디자인들은 나중에 개인 작업으로 따로 진행할 예정 

그래도 오늘 올린 애니메이션은 애펙 파일도 같이 업로드 해보았음


아직 미개척(?) 분야의 커뮤니티여서 그런지 벌써 top contributors에 올랐다..오..


프로필에는 회사 아트웍전용 인스타 계정만 올려두었는데 프로필뷰도 조금 나오는듯 

나는 그냥 다운로드만 하고 남꺼는 잘 안열어봤는데 .. 반성중(?)

본문에 마크다운 사용 가능하다고 해서 난생처음 써보기도 하고.

한땀한땀 만든 2018 새해 맞이 애니메이션이 나름 반응이 좋아서 다행이다





스터디/UX, HCI, Interaction 2017. 12. 19. 15:43

[Sketch] 스케치 파일의 레이어를 애프터 이펙트로 Sketch2AE


맥에서 스케치 파일의 레이어를 애프터 이펙트로 옮겨주는 플러그인 Sketch2AE

https://google.github.io/sketch2ae/

이런 훌륭한건 도대체 누가 만드나 봤더니 역시 구글이었다..

디자이너들의 암을 깨끗히 낫게 하여주시는 감사한 존재








1. 다운받아서 스케치 플러그인 설치 - 새로운 파일에 아트보드에 원하는 스케치 레이어 넣고 플러그인 메뉴에서 세이브 






2. jsx 파일을 응용프로그램 내부에 애펙 ScriptUI Panels 폴더에 넣기! - 아까 저장한 sketchae 파일 불러오기

근데 여기서 json parse 에 에러가 뜬다 

........


여러 시도를 해봤는데

안보이게 가려둔 안쓰는 레이어는 다 지우고.. 

텍스트는 왠만하면 create outline (그럼 텍스트 애니메이션은 애펙에서 못해보는건가)


레이어를 한꺼번에 다 옮기는것보다는 그룹별로 따로 옮겨서 콤포지션을 만들고 그걸 합쳐서 하나의 파일로 만드는걸 추천!



-- 

지금 가장 확실한 방법은 텍스트 레이어를 깨는건데

홈페이지 샘플 영상을 보면 텍스트가 그대로 살아있다. 폰트와 텍스트를 영어로 바꾸었는데도 효과 없음

그냥 create outline 이 답인듯 

어차피 bodymovin - lottie 로 가려면 텍스트를 깨서 하는게 낫겠다 싶기도 하다.

아래는 깃허브에 로그인데 이번 버젼에서 따옴표 안에 텍스트 에러나는거랑 빈 오브젝트 에러가 고쳐지긴 했다고 한다