Lottie Animation Tool은 Bodymovin을 사용하여 json 형식으로 내보낸 Adobe After Effects 애니메이션을 구문 분석하고 모바일 장치에서 기본적으로 렌더링하는 Android 및 iOS용 모바일 라이브러리입니다!
Lottie를 사용하면 엔지니어가 코드를 다시 작성하지 않고도 더욱 풍부한 애니메이션 효과를 쉽게 만들 수 있습니다. Lottie를 사용하면 더 이상 효과를 표시하기 위해 Gif 애니메이션을 사용할 필요가 없습니다.
현재 Lottie는 경로 트리밍, 마스킹, 덮기 및 기타 작업을 지원합니다. 자주 사용하는 항목을 더 빠르게 로드하기 위한 선택적 캐싱 메커니즘도 있습니다. 이 앱의 목표는 개발자와 애니메이터가 앱용 애니메이션을 보다 쉽게 제작하여 전반적인 상호작용 요소를 향상시킬 수 있도록 돕는 것입니다.
1. 디자이너는 전문 애니메이션 제작 도구인 Adobe After Effects를 사용하여 애니메이션을 구현하므로 애니메이션 구현이 더욱 편리해지고 애니메이션 효과가 향상됩니다.
2. 프런트엔드에서는 쉽게 애니메이션을 호출하고 애니메이션을 제어할 수 있어 프런트엔드 애니메이션의 작업 부하가 줄어듭니다.
3. 애니메이션을 디자인 및 제작하고 프런트 엔드에 애니메이션을 표시하며 전문가는 전문적인 작업을 수행하며 노동 분업은 합리적입니다.
4. 판매자의 쇼는 구매자의 쇼이며 복원 수준은 100%입니다.
5. lottie 솔루션을 사용하면 json 파일 크기가 gif 파일보다 훨씬 작아지고 성능이 향상됩니다.
1. lottie-web 파일 자체는 아직은 상대적으로 큽니다. lottie.js의 크기는 513k이고, 압축 후 크기는 144k입니다. 그러므로 로티웹 로딩에 주의가 필요합니다. 현재 H5 프로젝트에는 오프라인 패키지가 있으며 PC 프로젝트도 PWA에 업로드되어 로딩 속도를 보장하기 위해 캐시됩니다.
2. Lottie 애니메이션은 실제로 svg 애니메이션/캔버스 애니메이션으로 이해될 수 있으며 기존 HTML에 애니메이션 효과를 추가할 수 없습니다.
3. 애니메이션 json 파일 내보내기는 현재 AE의 매개변수를 json 콘텐츠로 하나씩 내보냅니다. 디자이너가 많은 레이어를 생성하는 경우 여전히 상대적으로 큰 json 파일(20kb) 문제가 있을 수 있습니다. 디자이너는 특정 규범을 따라야 합니다.
4. 로티에서 구현할 수 없는 AE 애니메이션 효과는 극소수이며 일부는 성능 문제로 인해 구현되지 않습니다. 예: 스트로크 애니메이션 등