题目背景
有一天我们的UI设计师找到我说，要把页面中我本身用顺序写的动画，换成他们给的json动画，原因是有的动画很庞杂，本身写起来达不到他们的预期结果（写到这里我倏忽想到一个题目，这么庞杂的动画为何不运用gif。。。。坐我劈面的安卓开辟小哥答由于gif播放的时刻能够质量不高不流通，好吧我信了）
我：？？？？客户端能够加json动画，H5页面没听说过能够读json动画哎
设计师一脸一定，说能够的，有web版本。
写到这里，我真的要好好夸一波我们的设计师妹子了，险些许多蛮好的处理要领都是在他们的“强迫”之下找到的（哦，她们还会写H5页面。。。要我有何用系列
那题目来了，怎样在H5页面内里运用json动画呢
如安在H5页面内运用json动画
这时刻设计师甩了一个链接给我，看这里lottie-web ；我点进去了解了一下，是Airbnb开源的一个动画库，该库能够完成许多酷炫动画，运用起来也很简朴，设计师只须要经由过程AE做成的动画导出JSON文件，然后前端运用Lottie直接加载JSON文件天生动画，既不须要设计师切N多gif，也不须要前端去举行庞杂绘制了，一石二鸟，而且，Lottie全平台可用，ios、Android、web、React Native都能够，且占用内存少，加载流通。（这么个仙人东西我为何如今才发明。。
说了这么多，那怎样在H5页面内里运用呢？
很简朴了，设计师天生的文件夹发给你(设计师那里只用在AE中加个lottie插件，导出就好了)，翻开以后应该是这模样的，翻开demo.html就晓得是怎样用的了（所以我还在这里写什么技术文章
打趣归打趣，实在在运用中照样碰到了许多坑的，这里纪录几个运用时注重的处所
1.demo.html内里有许多内联的东西，运用时堆积在页面内不好看
细致看一下，实在demo.html把js和json都放进去了，这时刻我们能够把js和json零丁分出来，js的话能够运用cdn上供应的地点
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js"></script>动画须要的json数据放在data.json文件内里，然则给出的json文件内里的数据格式是如许的（太长了 截不完
那假如你要在零丁的一个html内里运用script的体式格局引入json文件的话，会报错，所以须要修正json文件，在前面加上变量，赋值。以下图：
如许你能够经由过程像引入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() {
document.getElementsByTagName('svg')[0].style.height = 'auto';
}, 50);
css部份：（给lottie增添flex规划）
#lottie {
width:100%;
height:100%;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
终究结果：
总结
以上图片截图都是静态的，现实是有一个动态结果的，我不晓得怎样增加动图就没弄了，感兴致的能够试一下。
适用范围：
我觉得平常全屏的或许部分很庞杂的动画能够运用这个要领一试，比gif要流通，兼容性也做得不错，一些安卓产物比较酷炫的开屏就是运用的这个要领，H5页面的话，简朴动画平常本身顺序完成就能够，还能够防止踩坑。
