Lottie-Player를 사용하여 Lottie의 기능을 웹에서 구현하는 방법

안녕하세요! 사쿠입니다!

일반적으로 Lottie의 기능을 web상에서 구현할 때【Lottie.min.js】를 다운로드해 외부 파일로서 읽어들이는 방법이 세오리로 되어 있습니다.

하지만 이 기사에서는 대체 수단으로 Lottie-Player를 로드 Lottie의 기능을 구현하는 방법을 소개하고 싶습니다.

Lottie-Player를 사용하는 장점으로
・초단문으로 끝난다
· 검증하기 쉽다

등의 장점을 얻을 수 있습니다.

Lottie-Player 파일 불러오기

위 사이트의 【dist/lottie-player.js】를 가져옵니다.

Lottie-Player-import-sample.html

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>

링크는 소스 코드대로

LottieFiles로 .json 파일 로드

이 사이트로 이동합니다.

LottieFiles는 유시가 만든 애니메이션이 Lottie에서 사용할 수 있는 json 파일로 공개된 사이트입니다.


이미지 오른쪽 상단의 'View Recent Animations'에서 목록으로 표시할 수 있습니다.

구현할 애니메이션을 찾으면 선택합니다.


이번에는 이 애니메이션을 구현합니다.

오른쪽 하단의 'Lottie Animation URL'에서 URL 소득



다시 HTML 소스 코드로 돌아가서 이전에 소득한 URL을 태그 소스에 입력합니다.

Lottie-Player-sample

<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_H0vxmL.json"></lottie-player>

lottie-player 태그의 소스에 방금 소득한 URL을 입력

명령

자동 재생 및 루프와 같은 명령은 lottie-player 태그에서 수행됩니다.

Lottie-Player-order

<lottie-player src="リンク"
               autoplay
               loop
               speed = "1"
></lottie-player>

자주 사용되는 것은 위와 같습니다.
autoplay나 loop는 입력하는 것만으로 반영됩니다.

완성

Lottie-Player-comp

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_H0vxmL.json" autoplay loop speed = "1"></lottie-player>

출력 결과


단 두 줄로 Lottie의 애니메이션을 구현할 수있었습니다.
트라이 앤 오류가 발생합니다.

마지막으로

Lottie를 web상에 짜넣을 경우 Lottie.min.js 파일을 별도로 다운로드해 임포트 하는 방법이 세오리라고 말해졌습니다만 다른 수단으로서 이런 것도 있어, 라고 하는 소개였습니다!

불과 2행으로 실장할 수 있으므로 꼭 여러분 시험해 보세요!

twitter→( @saku_nectaris )
팔로우 잘 부탁해!