[lottie] lottie.js 적용하기

See the Pen lottie by Jihyeon Kim (@jh418531) on CodePen.

 

 

lottie는 에어비앤비에서 만든 라이브러리로, 

애프터이펙트에서 만든 애니메이션을 JSON형식으로 변환해서 이 JSON파일을 화면에 렌더링한다.

lottie를 쓰면 더 깔끔한 애니메이션을 적용할 수 있다.

 

Lottie 적용하기

1. cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js"></script>

 

2. lottie 애니메이션이 불러질 영역을 생성한다.

<div class="btn-wrap">
  <button type="button" class="btn">Click</button>
  <div class="like-lottie"></div>
</div>

 

버튼을 누르면 해당 버튼에서 하트가 나오는 듯한 형태로 구현하고 싶어서,

애니메이션 영역은 like-lottie라고 지정하고 버튼과 함께 묶어주었다.

 

3. 스크립트로 lottie 적용하기

function createLottieAni(containerSelector) {
    const container = document.querySelector(containerSelector);
    container.style.display = 'block';
    return bodymovin.loadAnimation({
        container: document.querySelector(containerSelector),
        path: 'https://lottie.host/9ac85b5e-70b2-4575-92c2-1e57ca366704/FoUDQguxQD.json',
        renderer: 'svg',
        loop: false,
        autoplay: false,
    });
}

 

createLottieAni 함수는 로티 선택자를 유동적으로 적용할 수 있도록 만들었다.

지금은 한 개의 버튼에서만 로티를 적용하고 있지만, 만약 여러개의 요소에 로티를 적용해야 한다면 이 함수가 더 의미가 있을 것 같다.

 

그리고 bodymovin.loadAnimation은 lottie 애니메이션을 로드하는 함수이다.

 

각 옵션을 살펴보자면

- container: 애니메이션을 표시할 HTML 요소

- path: 애니메이션 데이터가 저장된 JSON의 경로

- renderer: 애니메이션 렌더링 방식

- loop : 애니메이션 반복 여부

- autoplay: 애니메이션 자동재생 여부

 

path의 경우 JSON 파일을 다운로드 받아서 같은 디렉토리에 저장한 다음 경로를 넣어줘도 되고,

나는 lottie 웹페이지에서 제공하고 있는 무료 애니메이션을 사용했기 때문에

해당 페이지에서 경로를 가져왔다.

 

 

lottie 웹페이지에서 원하는 애니메이션을 선택 후, 우측 메뉴바에서 handoff를 선택해보면

링크를 제공하고 있다.

 

function lottieToggle(lottieAni) {
    lottieAni.stop();
    lottieAni.play();
}

 

lottieToggle은 애니메이션을 정지, 재생하기 위해 만들었다.

매개변수로 로티 애니메이션 선택자를 받을 수 있도록 했다.

 

const lottieAni = createLottieAni('.like-lottie');
document.querySelector('.btn').addEventListener('click', function () {
    lottieToggle(lottieAni);
});

 

애니메이션을 담은 영역을 lottieAni라고 저장하고,

버튼을 클릭할 때 마다 애니메이션이 정지/재생되도록 했다.

 

 

참고

https://lottiefiles.com/blog/working-with-lottie-animations/how-to-add-lottie-animation-in-web-page-html-kr/

https://velog.io/@ooo3289/lottie.js-htmljs-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0