by
Jul 12. 2021
로티(lottie): 애니메이션을 코드로 만들자(2)
JPG/JPEG/PNG 이미지 애니메이션 출력하는 법
[이전 글]
https://brunch.co.kr/@everiwon/9
작년 여름, 로티를 처음 접한 후 로티의 실용성에 감탄하며 사용하고 있었다.
png 파일 깨짐 현상그래.. 이 놈을 만나기 전까진…
랜더를 잘 돌렸다고 생각하고 파일을 확인했는데
.. 이미지 애니메이션이 안된다고? 말도 안돼
이 글에서는 폭풍 구글링을 통해 알아낸, 로티 이미지 애니메니션 방법에 대해 공유해보려고 한다.
할 수 있어 할 수 있어!!시작하기
일반적으로 로티를 사용하는 방법은 간단하다.
[Bodymovin 사용]
- after effect 파일에서 Window-Extensions-Bodymovin
- 컴포지션 선택 후, 파일 위치 설정
- 'Render' 버튼을 눌러 json파일 생성
하지만 이미지의 경우 이전에 몇 가지의 단계가 더 필요한데,
1. 스택으로 이미지 파일을 가져온다.
2. 스택 이미지 컴포지션을 랜더 큐에서 png 시퀀스로 내보낸다.
3. png 시퀀스로 내보낸 이미지들을 다시 불러온 후, 시퀀스 레이어로 만든다.
4. Window-Extensions-Bodymovin의 setting에서 Assets-inclued in json 선택 후 랜더!
끝!
1. 스택(시퀀스)으로 이미지 파일을 가져온다.
- after effect 프로젝트 패널의 빈 공간을 더블클릭하면 파일을 불러올 수 있다.
- 필요한 파일을 모두 선택하고 하단의 Importer JPEG(파일 확장자) Sequence를 선택하면 시퀀스로 이미지를 불러올 수 있다.
2. 스택 이미지 시퀀스를 랜더 큐에서 png 시퀀스로 내보낸다.
- Output module을 눌러 랜더 Format을 PNG Sequence로 내보낸다.
3. png 시퀀스로 내보낸 이미지들을 다시 불러온 후, 시퀀스 레이어로 만든다.
- 이번에는 Importer PNG(파일 확장자) Sequence 선택 없이 이미지를 불러온다.
- 하단과 같은 창이 뜨면, Single Composition으로 설정 후, 이 이미지들이 얼마나 지속되는지 설정한다.
-> 나의 경우 1 프레임씩 지속되는 이미지 애니메이션이어서 Still Duration을 00:01이라고 설정했다.
- 이후, Sequence Layers를 클릭하여 시퀀스 레이어로 만든다.
4. Window-Extensions-Bodymovin의 setting에서 Assets-inclued in json 선택 후 랜더!
- Setting에서 두 가지를 설정하면 좋은데, Enable Compression은 압축! Include in json은 이미지를 로티 안에 넣고 랜더를 한다는 뜻이다~
