H5/js/web lottie解析json 播放视频或动画
- 1、需要UI设计的小伙伴用AE把效果图导出时导成JSON格式，并且把json引入到你需要用到的项目里面
- 2、在index.html中引入lottie.min.js
- 3、查收dome
- 4、可以根据你们自己的需求设置容器的大小，但是需要按照动画设计原尺寸的宽高比例进行等比例设置，否则会出现拉伸、缩放等问题
lottie插件可以把前端实现起来比较困难的动画或短视频非常简单的实现
1、需要UI设计的小伙伴用AE把效果图导出时导成JSON格式，并且把json引入到你需要用到的项目里面
不会用AE导JSON文件的小伙伴可以自行百度！
1、
并且给这个json一个变量名
2、当然，你如果使用的是js模块化编程的话，可以不用更改data.json，直接import进来就行了，如下：
import animationData from ‘./data.json’
2、在index.html中引入lottie.min.js
1、CDN地址： https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js；
2、也可以打开cdn地址右键下载到使用的文件夹中
3、查收dome
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>帅气小智</title>
<style>
body{
background-color:black;
margin: 0px;
height: 100%;
overflow: hidden;
}
#lottie{
background-color:#fff;
width:100%;
height:100%;
min-width: 1200px;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}
</style>
</head>
<body>
<!--播放动画的容器-->
<div id="lottie"></div>
<!--引入lottie.js 和 需要播放的json 文件-->
<script src="lottie.min.js" type="text/javascript" charset="utf-8"></script>
<script src="data.json" type="text/javascript" charset="utf-8"></script>
<script>
var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop
