Lottie 성능 문제는 일반적으로 플레이어가 아닌 파일에서 발생합니다. After Effects를 사용하면 휴대폰에서 프레임별로 렌더링하는 데 비용이 많이 드는 기능을 쉽게 추가할 수 있습니다.
파일부터 시작하세요. 마스크와 트랙 매트는 종종 가장 큰 비용이 듭니다. 가능하면 더 간단한 모양으로 바꾸세요. 플레이어에게 필요하지 않은 효과와 흐림 효과를 제거합니다. 모양을 병합하고, 레이어 수를 줄이고, 신중하게 사전 구성하세요. 대용량 임베디드 이미지는 메모리와 디코딩 비용을 추가하므로 최적화하거나 벡터로 교체하세요. 무료 Lottie JSON 뷰어와 같은 Lottie 검사기는 파일 내부 내용을 확인하는 데 도움이 됩니다.
그런 다음 앱이 어떻게 재생되는지 확인하세요. 화면 밖에서, 닫힌 탭 내부 또는 스크롤한 목록 셀에서 계속 반복되는 애니메이션은 여전히 CPU와 배터리를 사용합니다. 표시되지 않으면 일시 중지하고 필요하지 않은 루프는 중지하세요. 한 번에 수십 개의 애니메이션을 재생하지 마십시오.
귀하의 플랫폼에 적합한 옵션을 선택하세요. 웹에서는 SVG와 캔버스 렌더러가 애니메이션에 따라 다르게 작동하므로 둘 다 테스트해 보세요. 압축된 .lottie(dotLottie) 형식은 다운로드 크기를 줄입니다. Android에서 플레이어가 지원하는 하드웨어 가속을 테스트해 보세요.
마지막으로 저사양 장치에서 측정합니다. 애니메이션이 여전히 너무 무거우면 해당 작업에 잘못된 도구일 수 있습니다. 간단한 CSS 또는 기본 애니메이션이 장식 루프를 대체할 수 있으며 대화형 구성 요소는 우리가 만드는 Rive 또는 ExodeUI와 같은 상태 기반 도구에 더 잘 구축될 수 있습니다.