Html5页⾯内使⽤JSON动画的实现
有⼀天我们的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都可以，且占⽤内存少，加载流畅。（这么个神仙东西我为什么现在才发现。。
说了这么多，那怎么在⾥⾯使⽤呢？
很简单了，设计师⽣成的⽂件夹发给你(设计师那边只⽤在AE中加个lottie插件，导出就⾏了)，打开之后应该是这样⼦的，打开demo.html就知道是怎么⽤的了（所以我还在这⾥写什么技术⽂章
玩笑归玩笑，其实在使⽤中还是碰到了很多坑的，这⾥记录⼏个使⽤时注意的地⽅
1.demo.html⾥⾯有很多内联的东西，使⽤时堆积在页⾯内不好看
仔细看⼀下，其实demo.html把js和json都放进去了，这时候我们可以把js和json单独分出来，js的话可以使⽤cdn上提供的地址
?
1<script type="text/javascript"src="cdnjs.cloudflare/ajax/libs/bodymovin/5.4.3/lottie.min.js"></script>
动画需要的放在data.json⽂件⾥⾯，但是给出的json⽂件⾥⾯的数据格式是这样的（太长了截不完
那如果你要在单独的⼀个html⾥⾯使⽤script的⽅式引⼊json⽂件的话，会报错，所以需要修改json⽂件，在前⾯加上变量，赋值。如下图：
这样你可以通过像引⼊js⽂件的⽅式⼀样的引⼊该json
?
1<script type="text/javascript"src="./data.json"></script>
这样可⽤的demo.html就缩减成了下⾯这样
?
1
2
3
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20<html xmlns="/1999/xhtml"> <meta charset="UTF-8">
<head>
<style>
body{
margin: 0px;
height: 100%;
overflow: hidden;
}
#lottie{
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;
}
20
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48    </style>
</head>
<body>
<div id="lottie"></div>
<script type="text/javascript"src="cdnjs.cloudflare/ajax/libs/bodymovin/5.4.3/lottie.min.js"></script> <script type="text/javascript"src="./data.json"></script>
<script>
var params = {
container: ElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
};
var anim;
anim = lottie.loadAnimation(params);
</script>
</body>
</html>
当然，你如果使⽤的是js模块化编程的话，可以不⽤更改data.json，直接import进来就⾏了，如下：
?
1import animationData from './data.json'
2.使适配移动端
之所以觉得这是个坑是因为，设计师给我的动画是全屏且⾮透明底的，然后她要求我将这个动画以宽度100% ⾼度垂直居中截取的⽅式定位，我在浏览器⾥⾯试了下，360*640屏幕下，宽度100%，表现形式是这样的（看上去是⾼度100% 宽度适配居中两边漏出了⿊⾊的背景⾊，见下图蓝⾊框起来的部分）
换成iPhone X的屏幕下，相反，表现出来是宽度100% ⾼度适配居中，上下漏出⿊⾊背景⾊，见下图蓝⾊框起来的部分（究其原因是因为iphonex屏幕较长
这个布局好熟悉哇，跟img的object-fit属性取值为contain的时候表现⼀致（object-fit也是宝藏，有兴趣的同学可以去研究⼀下，⾮常好⽤）我这⾥解决设计师的需求主要增加下⾯的代码：
?
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20js部分：
setTimeout(function() {
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;
}
20
最终效果：
总结
以上图⽚截图都是静态的，实际是有⼀个动态效果的，我不知道怎么添加动图就没弄了，感兴趣的可以试⼀下。
适⽤范围：我感觉⼀般全屏的或者局部很复杂的动画可以使⽤这个⽅法⼀试，⽐gif要流畅，兼容性也做得不错，⼀些安卓产品⽐较酷炫的开屏就是使⽤的这个⽅法，H5页⾯的话，简单动画⼀般⾃⼰程序实现就可以，还可以避免踩坑。
参考链接：
ae能做svg动画吗lottie官⽹
lottie-web github地址

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。