1. 引入Lottie 文件

1
https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js

  1. 设置dom节点

1
<div id="svgContainer" style="width: 100%;height: 100%;"></div>

  1. 获取节点

1
var svgContainer=document.getElementById('svgContainer');

  1. 初始化 lottie

1
2
3
4
5
6
7
8
9
10
11
var animItem=lottie.loadAnimation({
        container: svgContainer, // 包含动画的dom元素
        loop: true,// 循环播放
        autoplay: false, // 自动播放
        // renderer: "svg",
        renderer: "canvas",
        path: '引入JSON文件',
        // 不兼容canvas/html绘制
        // renderer: "svg",
        // path: '../mine.json',
    })

  1. 调用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function start(){
    console.log("调用start");
    lottie.play();
}
function pause(){
    console.log("调用pause");
    lottie.pause();
}
function stop(){
    console.log("调用stop");
    lottie.stop();
}
function setSpeed(x){
    console.log("调用setSpeed",x);
    lottie.setSpeed(x);
}
function destroy(x){
    console.log("调用destroy");
    lottie.destroy();
}

TIPS:

1
2
3
4
5
6
当设置path属性的时候，并不是简单的一个相对路径或者是绝对路径引入，
而是lottie会发送一个http请求，访问这个json文件。
如果是在vue/react项目中要注意最终的打包访问路径。

考虑页面性能更优，建议使用svg渲染方式，
通过path加载远程JSON文件，使用animationData会让json文件打包到JS中，