lottie-web, detailed explanation of lottie animation

First initialize the project npm init

Early adopters:

First create the index.html file

The json file of lottie needs to be placed under src/main/assets/

Need to use live server to open

file structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>lottie</title>
    <!-- 第一步: 引入CDN -->
    <script src="https://gw.alipayobjects.com/os/lib/lottie-web/5.5.6/build/player/lottie.min.js"></script>
  </head>
  <body>
    <!-- 第二步: 创建容器 -->
    <div id="container"></div>
  </body>
  <script>
    // 第三步: 实例化
    var anim = lottie.loadAnimation({
      container: document.getElementById("container"), // 容器
      renderer: "svg",
      loop: true,
      autoplay: true,
      path:
        "./src/main/assets/data.json"
    });
  </script>
</html>

container The container used for rendering
renderer renderer
loop loop
autoplay automatically play
path path

api use:

name	parameter	describe
stop	none	stop animation
play	none	play animation
pause	none	pause
setSpeed	Number	Set the playback speed, 1 means 1x speed, 0.5 means 0.5x speed
setDirection	Number	Forward and reverse playback, 1 means forward, -1 means reverse
goToAndStop	Number, [Boolean]	Jump to a certain frame or stop at a certain second, the second parameter iFrame is whether it is based on frame mode or time, the default is false
goToAndPlay	Number, [Boolean]	Jump to a certain frame or a certain second, the second parameter iFrame is whether it is based on frame mode or time, the default is false
playSegments	Array, [Boolean]	Play the clip, parameter 1 is an array, and the two elements are the start frame and the end frame; parameter 2 is whether to play the clip immediately or wait for the previous animation to complete
destroy	none	destroy

example:

  setTimeout(() => {
        anim.stop()
  }, 1000);

Pause and start:


    <button class="pause">暂停</button>
    <button class="play">开始</button>
  <script>

        const open = document.querySelector('.play')
        const pause = document.querySelector('.pause')
        open.addEventListener('click',function () {
          anim.play()
        })

        pause.addEventListener('click',function () {
          anim.pause()
        })
  </script>

Event monitoring method one

 anim.addEventListener('loopComplete',()=>{
        console.log(111);
      })

Executed after the animation loop finishes. . .