lottie-web，lottie动画使用详解

首先初始化项目 npm init

尝鲜：

首先创建 index.html文件

lottie 的json文件需要放在 src/main/assets/下面

需要使用 live server 打开

文件结构：

<!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 用于渲染的容器
renderer 渲染器
loop 循环
autoplay 自动播放
path 路径

api 使用：

名称	参数	描述
stop	无	停止动画
play	无	播放动画
pause	无	暂停
setSpeed	Number	设置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度
setDirection	Number	正反向播放，1 表示正向，-1 表示反向
goToAndStop	Number, [Boolean]	跳到某一帧或某一秒停止，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false
goToAndPlay	Number, [Boolean]	跳到某一帧或某一秒开始，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false
playSegments	Array, [Boolean]	播放片段，参数1为数组，两个元素为开始帧和结束帧；参数2为，是否立即播放片段，还是等之前的动画播放完成
destroy	无	销毁

例：

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

暂停和开始：


    <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>

事件监听方式一

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

动画循环结束后执行。。。

lottie-web，lottie动画使用详解

首先初始化项目 npm init

尝鲜：

api 使用：

例：

事件监听方式一

猜你喜欢