Lottie Files / lottie-player & jlottie**

그래픽, 마이크로 애니메이션 구현을 위한 플러그인 탐방

웹, 앱용 애니메이션 플러그인으로 가볍고 빠르다. 스타일은 path, 플랫, 단색에 유리하다.

HTML lottie-player 사용예시: 내 About 페이지

<script src="https://unpkg.com/@lottiefiles/lottie-player@0.3.0/dist/lottie-player.js"></script>

<lottie-player 
    src="/til/js/about_bot_face.json"  
    background="transparent"  
    speed="1"  
    loop 
    hover
    id="about-bot">
</lottie-player>

jlottie vs lottie-player

jlottie는 버튼 등 인터렉션용 micro animation에 최적화되어 있다. 스플래쉬 등 Graphic animation에는 심미상 lottie player를 사용하는 것이 좋을거 같다.

jlottie micro animation 만들시 유의사항

기존 lottie player용 애니메이션 만드는 것보다 더 제약이 심하다.

Supported features

Features not supported

jlottie CDN

<script src="https://unpkg.com/@lottiefiles/jlottie@latest/dist/jlottie.js" type="text/javascript"></script>

HTML jlottie 예시: 내 About 페이지

<script src="https://unpkg.com/@lottiefiles/jlottie@latest/dist/jlottie.js" type="text/javascript"></script>

<div class='cover'>
    <div id='my-animation'></div>
</div>

<script>
    let animationContainer = document.getElementById('my-animation');
    jlottie.loadAnimation({
                    container: animationContainer,
                    loop: false,
                    autoplay: false,
                    path: '/js/jlottie-test-1.json',
    });

    let coverContainer = document.getElementById('cover');

    coverContainer.addEventListener("click", () => {
        jlottie.play(animationContainer.id);
    });
    coverContainer.addEventListener("onLoopComplete", () => {
        jlottie.goToAndStop(0, true, animationContainer.id);
    });
    coverContainer.addEventListener("mouseover", () => {
        animationContainer.classList.remove("black-filter");
        animationContainer.classList.add("gary-filter");
      });
    coverContainer.addEventListener("mouseleave", () => {
        animationContainer.classList.remove("gary-filter");
        animationContainer.classList.add("black-filter");
    });
</script>

Conclusion

개발자 입장에서는 lottie-player와 jlottie는 비슷한 맥락으로 사용하지만 애니메이터에게는 서로 다른 접근방법으로 애니메이션을 만들어야 한다. 최종적으로는 json 애니메이션의 최적화를 위해서는 graphic과 micro animation을 차이를 두고 이 두 lottie files에 친숙해 지는 것이 좋을거 같다.

다음과 같은 케이스에서 써보자.

Resource