Lottie
에어비앤비에서 개발한 라이브러리
벡터 애니메이션을 웹, 앱에 적용할 수 있게
이미지는 래스터(Raster, 픽셀 개념)와 벡터(Vector, 수학 방정식을 기반으로 점, 선 곡선등을 그림)로 구분
svg의 애니메이션 버전 == 벡터 기반의 애니메이션
애프터 이펙트(모션 그래픽에 사용되는 툴)에서 작업
장점
1. 벡터 기반이라 용량이 적음
2. 벡터 기반이라 크기에 의한 해상도 저하가 없음
3. 적용이 간단
4. 사용자의 행동에 반응하는 인터랙션 애니메이션이 가능
APNG
PNG를 확장한 이미지 파일 포맷
애니메이션 이미지에 대한 지원이 추가됨 => 애니메이션이 되는 PNG
pc - IE에서 불가능
mobile - Opera Mini에서 불가능, App에서 불가
html에서 apng를 사용하는 방법은 png와 같음 img 태그에 넣으면 됨, 하지만 모든 브라우저에서 지원하지 않기 때문에 확인이 필요
장점
1. GIF, mp4(video) 보다 낮은 용량, 더 선명한 애니메이션
2. 기존 PNG 파일과의 하위호환성을 유지
(APNG 파일의 첫 프레임은 PNG로 저장하기 때문에 APNG를 지원하지 않는 브라우저도 APNG 파일의 첫 프레임을 보여 줄 수 있음)
