json html 展示,json动画制作
问题背景
有一天，我们的UI设计师找到我，说要把页面里我自己程序写的动画换成他们给的json动画。原因是有些动画太复杂，自己写的时候达不到预期效果。(写到这里，突然想到一个问题。这么复杂的动画为什么不用gif？坐在我对面的安卓开发者兄弟回答是因为gif的质量可能不高，播放的时候不流畅，好吧，我信)
我：客户端可以添加json动画，H5页面从来没有听说过json动画。
设计师一脸肯定，说好。有网页版。
写到这里，我真的想夸夸我们的设计师姐姐。几乎很多好的解决方案都是在他们的“胁迫”下找到的(哦，他们还会写H5页。能为你做什么？
这就是问题所在。如何在H5页面中使用json动画？
如何在H5页面内使用json动画
这时候设计师给我甩了一个链接。看到这里洛蒂网络；我点进去了解了一下。它是Airbnb的开源动画库，可以完成很多很酷的动画，使用起来非常简单。设计师只需要通过AE制作的动画导出JSON文件，然后前端使用Lottie直接加载JSON文件生成动画。不需要设计师裁剪N个gif或者前端做复杂的图纸，一举两得。而且Lottie在所有平台都有，ios，Android，web，React。为什么我现在才发现这么仙的东西？
说到这里，我该如何在H5页面中使用它呢？
很简单。设计师生成的文件夹会发给你(设计师只需要给AE添加一个lottie插件，导出即可)。打开后应该是这样的。打开demo.html你就知道怎么用了(所以我还是在这里写一些技术文章。
开个玩笑，其实还是有很多坑在用的。以下是使用中的几点注意事项。
1.demo.html里面有很多内联的东西，使用时堆积在页面内不好看
仔细看看。实际上，demo.html把js和json都放进去了。这时候我们可以把js和json分开。如果使用js，可以使用cdn上提供的地址。
script type= text/JavaScript src= https://cdnjs . cloud flare . com/Ajax/libs/body movin/5 . 4 . 3/Lottie . min . js /json脚本动画需要的数据放在data.json文件中，但是给出的JSON文件中的数据格式如下(太长了，写不完。
然后，如果你想用脚本在单独的html中引入json文件，会得到一个错误，所以你需要修改json文件，添加变量，赋值到前面。如下图：
通过这种方式，可以像导入JS文件一样导入jsON。
脚本类型= 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；边距：0px身高：100%；溢出：隐藏；} #洛蒂{ background-color:# fff；宽度：100%；身高：100%；显示：块；溢出：隐藏；transform: translate3d(0，0，0)；文本对齐：居中；不透明度：1；}/style/head body div id= Lottie /div script type= text/JavaScript src= https://cdnjs . cloud flare . com/Ajax/libs/body movin/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，animation data:animation data }；var animanim=Lottie . load animation(params)；/script/body/html当然，如果你使用的是js模块化编程，可以直接导入，不需要修改data.json，如下：
从导入animationData。/data.json2.使动画适配移动端
我之所以觉得这是个坑，是因为设计师给我的动画是全屏不透明的，然后她让我把这个动画定位成宽度100%，高度垂直居中的方式。我在浏览器里试了一下，360*640的屏幕上宽度是100%。表达式如下(好像高度100%宽度贴合中间边，黑色背景色漏出来。请参见下面的蓝色框部分)
而在iphonex的屏幕下，则相反，显示宽度为100%，高度居中，黑色背景色从上下漏出，如下图蓝色边框部分所示(原因是iPhone X屏幕较长。
这种布局是如此熟悉，它与img的object-fit属性包含时的性能一致(object-fit也是一个宝藏，因此有兴趣的学生可以研究它，这非常容易使用)
我在这里主要添加以下代码来解决设计师的需求：
Js节：SetTimeout(function(){ document . getelementsbytagname( SVG )[0]。style.height= auto}, 50);Css部分：(向lottie添加flex布局)# Lottie { width:100%；身高：100%；transform: translate3d(0，0，0)；文本对齐：居中；不透明度：1；位置：绝对；top:0；左：0；z指数：3；显示器：flex弯曲方向：行；justify-content:居中；对齐-项目：居中；}最终效果：
总结
以上截图是静态的，实际上有动态效果。我不知道怎么加动画，所以没弄。有兴趣的可以试试。
适用范围：我感觉一般的全屏或者部分复杂的动画都可以尝试用这个方法，比gif流畅，兼容性好。一些Android产品使用这种方法来打开屏幕。对于H5页面，简单的动画可以通过自己的程序实现，可以避免踩坑。
参考链接：
洛蒂官网
洛蒂-web github地址
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。