lottie json import 구문 정리

 

body 안에

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

을 삽입하고

경로를 맞춰준 뒤에

<template>

  <main>

    <h1>메인 페이지</h1>

    <div class="controller">

      <lottie-player

        src="/Red_Blue.json"

        background="transparent"

        speed="1"

        loop

        autoplay

      ></lottie-player>

    </div>

  </main>

</template>

<style>

.controller {

  width: 200px;

}

</style>

이런 식으로 삽입하면 lottie animation의 구현이 된다.

참조 : 

https://github.com/airbnb/lottie-web

GitHub - airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io

https://help.lottiefiles.com/hc/en-us/articles/4439877810841-Getting-Started