728x90 300x250 SMALL Front-end392 Lottie 사용 팁 & 주의사항 주의할 점1. JSON 용량 주의복잡한 애니메이션일 수록 JSON용량이 커진다. 모바일 환경에서는 속도 저하의 원인이 될 수 있다. 2. 이미지 대신 벡터 사용 권장이미지가 포함된 경우 렌더러가 제대로 해석하지 못하거나 무거워질 수 있다. 3. 호환되지 않는 AE 기능 사용 금지3D레이어표현식마스크 일부 기능 등은 변환 시 누락될 수 있음 디버깅 방법개발자 도구로 콘솔 에러 확인렌더러 변경(svg, canvas, html) 후 테스트 2025. 5. 9. Lottie 애니메이션 제어하기(재생/정지/속도 등) 기본 제어 함수const anim = lottie.loadAnimation({ container: document.getElementById('target'), renderer: 'svg', loop: false, autoplay: false, path: 'sample.json'}); 제어코드anim.play(); // 재생anim.pause(); // 일시정지anim.stop(); // 멈춤anim.setSpeed(2); // 2배속 재생anim.goToAndStop(50, true); // 특정 프레임으로 이동 이벤트 기반으로 연동하기재생일시정지 2025. 5. 6. 웹사이트에 Lottie애니메이션 적용하기 1. CDN으로 라이브러리 추가 2. HTML에 애니메이션 영역 생성 3. JavaScript로 애니메이션 로드lottie.loadAnimation({ container: document.getElementById('lottie-box'), renderer: 'svg', loop: true, autoplay: true, path: 'https://assets1.lottiefiles.com/datafiles/VHvOcuN5uBJMwP1/data.json'}); 2025. 5. 6. Lottie 애니메이션 만드는 법(After Effects + Bodymovin) Lottie 애니메이션 만드는 방법Lottie 애니메이션은 주로 After Effectsㄹ 제작된다. AE에서 애니메이션을 만든 후, Bodymovin이라는 플러그인을 통해 JSON으로 추출한다. 준비물Adobe After Effects 설치Bodymovin 플러그인 (AE에서 설치 가능)또는 LottieFiles 웹사이트(직접 다운로드 or 편집)제작 과정1. AE에서 애니메이션 제작텍스트, 도형, 패스 등을 활용한 벡터 애니메이션 제작이미지 사용 시 JSON 파일 크기 증가 주의!2. Bodymovin으로 추출윈도우 메뉴 > Extensions > Bodymovin원하는 컴포지션 선택 후 Render클릭.json 파일 생성됨3. 웹에서 미리보기(LottieFiles 추천)LottieFiles.com에.. 2025. 5. 5. 이전 1 2 3 4 5 6 7 ··· 98 다음 728x90 반응형 LIST