【好物推荐】lottie，一个可以在web端、ios、android使用的动态图工具

这两天碰到一个场景，需要做一个动态背景，在web端，ios端，android端呈现相同的效果——就是要动起来。

上面这个问题看起来很简单，实操起来却碰到了一些意外的困难。首先是设计师提供的“动图”是个视频，就是mp4。我要求过给个gif，但得到的回复是转gif文件会很大，且不清晰。由于gif文件过大，加载时间实在太不友好，所以我接受了用mp4，然后就是一顿操作。

代码如下：

<video
   src='xxx.mp4'
   muted
   loop
   autoPlay
   x5-playsinline='true'
   playsinline='true'
   webkit-playsinline='true'
   preload='auto'
   x5-video-player-type='h5'
/>

友友们请注意，上面这套组合拳是能够使mp4在ios的chrome以及safari浏览器中自动播放的，在PC端以及android端的兼容也不错。但是在ios的app内不能实现自动播放。所以该方法在本次需求中不可用。

后面我被人推荐去用lottie，一个可以把json格式文件转化为svg格式动图的工具，只需要安装一个包，就能轻松使用。

对不同的端它似乎分得比较细，我用的是lottie-web的包，但使用起来发现，在web端、ios端、android端都满足了我的需求。大家可以去它的官网或github按需安装使用（链接在文末）。

使用详情：

npm i -d lottie-web        // 安装包

import lottie from 'lottie-web';    

var animation = lottie.loadAnimation({
  container: document.getElementById('svg-box'),     // svg的容器，转化后的动图放在该元素内
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/aaa/xxxx.json',    // json文件地址
});

① lottie的官方网站：
https://lottiefiles.com/

② 一篇介绍lottie用法的掘金文章，总结的很好，写得简单清晰：
https://juejin.cn/post/6844903661760413704?utm_campaign=sembaidu&utm_medium=sem_baidu_jj_pc_dc01&utm_source=bdpcjjwz04999