Lottie 로딩바 적용하기

로딩바는 GIF나 CSS 애니메이션으로만 적용하는 줄 알았는데 JSON으로도 적용할 수 있다네요?! 🫢

 

Lottie는 JSON 기반의 애니메이션 파일입니다. Lottie의 장점은 다음과 같습니다.

1. 용량이 작음 (GIF나 MP4등 품질은 같은데 용량은 훨씬 더 작음)
2. 크기를 자유롭게 조정해도 해상도에 문제 없음 (백터에 기반하기 때문 확대 축소 문제 없음)
3. 다양한 기기에서 호환성 (IOS, AOS, 웹, Native 등 수정하지 않고 바로 사용 가능)
4. 여러 상호작용(클릭, 호버, 스크롤링 등) 수정 및 반응 가능

저는 Vue를 사용하고 있었기 때문에 vue-lottie라는 라이브러리를 이용했습니다.

 

이제 사용법을 살펴 볼게요.

1. Lottie json 파일 만들기

LottieFiles 사이트에 들어가면 자신이 원하는 애니메이션을 만들 수 있습니다. 완성했다면 Export를 눌러 JSON 파일로 다운로드 받으면 됩니다.

{
  "v": "4.8.0",
  "meta": {
    "g": "LottieFiles AE ",
    "a": "",
    "k": "",
    "d": "",
    "tc": ""
  },
  "fr": 29.9700012207031,
  "ip": 0,
  "op": 61.0000024845809,
  "w": 1000,
  "h": 1000,
  "nm": "Comp 2",
  "ddd": 0,
  "assets": [],
  "layers": [
    {
      "ddd": 0,
      "ind": 1,
      "ty": 4,
      "nm": "Shape Layer 2",
      "sr": 1,
      "ks": {
        "o": {
          "a": 0,
          "k": 100,
          "ix": 11
        },
        "r": {
          "a": 0,
          "k": 0,
          "ix": 10
        },
        "p": {
          "a": 0,
          "k": [
            500,
            500,
            0
          ],
          "ix": 2
        },
        "a": {
          "a": 0,
          "k": [
            35.487,
            -2.513,
            0
          ],
          "ix": 1
        },
        "s": {
          "a": 0,
          "k": [
            70,
            70,
            100
          ],
          "ix": 6
        }
      },
      "ao": 0,
      "shapes": [
        {
          "ty": "gr",
          "it": [
            {
              "d": 1,
              "ty": "el",
              "s": {
                "a": 0,
                "k": [
                  686.973,
                  686.973
                ],
                "ix": 2
              },
              "p": {
                "a": 0,
                "k": [
                  0,
                  0
                ],
                "ix": 3
              },
              "nm": "Ellipse Path 1",
              "mn": "ADBE Vector Shape - Ellipse",
              "hd": false
            },
            {
              "ty": "st",
              "c": {
                "a": 0,
                "k": [
                  1,
                  1,
                  1,
                  1
                ],
                "ix": 3
              },
              "o": {
                "a": 0,
                "k": 100,
                "ix": 4
              },
              "w": {
                "a": 0,
                "k": 120,
                "ix": 5
              },
              "lc": 2,
              "lj": 1,
              "ml": 4,
              "bm": 0,
              "nm": "Stroke 1",
              "mn": "ADBE Vector Graphic - Stroke",
              "hd": false
            },
            {
              "ty": "tr",
              "p": {
                "a": 0,
                "k": [
                  35.487,
                  -2.513
                ],
                "ix": 2
              },
              "a": {
                "a": 0,
                "k": [
                  0,
                  0
                ],
                "ix": 1
              },
              "s": {
                "a": 0,
                "k": [
                  100,
                  100
                ],
                "ix": 3
              },
              "r": {
                "a": 0,
                "k": 0,
                "ix": 6
              },
              "o": {
                "a": 0,
                "k": 100,
                "ix": 7
              },
              "sk": {
                "a": 0,
                "k": 0,
                "ix": 4
              },
              "sa": {
                "a": 0,
                "k": 0,
                "ix": 5
              },
              "nm": "Transform"
            }
          ],
          "nm": "Ellipse 1",
          "np": 3,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        },
        {
          "ty": "tm",
          "s": {
            "a": 1,
            "k": [
              {
                "i": {
                  "x": [
                    0.295
                  ],
                  "y": [
                    0.976
                  ]
                },
                "o": {
                  "x": [
                    0.614
                  ],
                  "y": [
                    0.007
                  ]
                },
                "t": 15,
                "s": [
                  1
                ]
              },
              {
                "t": 59.0000024031193,
                "s": [
                  99
                ]
              }
            ],
            "ix": 1
          },
          "e": {
            "a": 1,
            "k": [
              {
                "i": {
                  "x": [
                    0
                  ],
                  "y": [
                    0.944
                  ]
                },
                "o": {
                  "x": [
                    0.167
                  ],
                  "y": [
                    0
                  ]
                },
                "t": 3,
                "s": [
                  0
                ]
              },
              {
                "t": 59.0000024031193,
                "s": [
                  100
                ]
              }
            ],
            "ix": 2
          },
          "o": {
            "a": 1,
            "k": [
              {
                "i": {
                  "x": [
                    0.667
                  ],
                  "y": [
                    0.5
                  ]
                },
                "o": {
                  "x": [
                    0.333
                  ],
                  "y": [
                    0.495
                  ]
                },
                "t": 0,
                "s": [
                  0
                ]
              },
              {
                "t": 61.0000024845809,
                "s": [
                  360
                ]
              }
            ],
            "ix": 3
          },
          "m": 1,
          "ix": 2,
          "nm": "Trim Paths 1",
          "mn": "ADBE Vector Filter - Trim",
          "hd": false
        }
      ],
      "ip": 0,
      "op": 900.000036657751,
      "st": 0,
      "bm": 0
    }
  ],
  "markers": []
}

 

2. 라이브러리 import 및 컬러/bg 조정

npm install --save vue-lottie

 

3. import한 라이브러리 코드에 적용하기

@ts-ignore: eslint 에러를 안나게 하려고 주석처리 했는데 eslint 속성에서 파일 확장자를 안쓰겠다는 속성 때문에 에러가 난 것

@ts-ignore

<template lang="pug">
.lottie-test
  Lottie(:options="options" :height="40" :width="40" @animCreated="handleAnimation")
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

// @ts-ignore
import Lottie from 'vue-lottie'
// @ts-ignore
import * as animationData from '~/static/assets/images/loading/loading-indicator.json'
@Component({
  components: {
    Lottie,
  },
})
export default class LottieTest extends Vue {
  options = { animationData: animationData.default }
  speed: number = 1
  anim: any = ''

  handleAnimation(anim) {
    this.anim = anim
  }
}
</script>

<style lang="scss" scoped>
.lottie-test {
  height: 100vh;
  display: flex;
  align-items: center;

  ::v-deep svg {
    background-color: #5e4ff0e6;
    border-radius: 50%;
  }
}
</style>

4. 결과물 확인

로딩바 결과화면

 

도움 받은 사이트

- what-is-lottie

- eslint-error