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); // 특정 프레임으로 이동

 

이벤트 기반으로 연동하기

<button onclick="anim.play()">재생</button>
<button onclick="anim.pause()">일시정지</button>