H5/js/web lottie解析json 播放视频或动画
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>
// 声明一个变量来设置lottie 播放属性
var params = {
container: document.getElementById('lottie'), //播放的位置
renderer: 'svg',
loop: false, //是否循环播放
autoplay: true, //是否自动播放
animationData: animationData // 加载json的文件名
};
var anim;
anim = lottie.loadAnimation(params); // 加载
// lottie.playAnimation(); //播放
// lottie.pauseAnimation(); //暂停
// lottie.cancelAnimation(); //取消
// lottie.getDuration(); //获取动画时长
</script>
</body>
</html>