这样你可以通过像引入js文件的方式一样的引入该json
<script type="text/javascript" src="./data.json"></script>这样可用的demo.html就缩减成了下面这样
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
<style>
body{
background-color:black;
margin: 0px;
height: 100%;
overflow: hidden;
}
#lottie{
background-color:#fff;
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
} </style>
</head>
<body>
<div id="lottie"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js"></script>
<script type="text/javascript" src="./data.json"></script>
<script>
var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
};
var anim;
anim = lottie.loadAnimation(params);
</script>
</body>
</html>
当然，你如果使用的是js模块化编程的话，可以不用更改data.json，直接import进来就行了，如下：
import animationData from './data.json'2.使动画适配移动端
之所以觉得这是个坑是因为，设计师给我的动画是全屏且非透明底的，然后她要求我将这个动画以宽度100% 高度垂直居中截取的方式定位，我在浏览器里面试了下，360*640屏幕下，宽度100%，表现形式是这样的（看上去是高度100% 宽度适配居中 两边漏出了黑色的背景色，见下图蓝色框起来的部分）
换成iPhone X的屏幕下，相反，表现出来是宽度100% 高度适配居中，上下漏出黑色背景色，见下图蓝色框起来的部分（究其原因是因为iphonex屏幕较长
这个布局好熟悉哇，跟img的object-fit属性取值为contain的时候表现一致（object-fit也是宝藏，有兴趣的同学可以去研究一下，非常好用）
我这里解决设计师的需求主要增加下面的代码：
js部分：
setTimeout(function() {
