「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」
在这次开发中，我就遇到了各种动画，之前也有同事已经使用过，这次轮到我接这类的需求，我也就得好好了解一下了。因为我做的是h5页面的，所以项目中引入的是lottie-web。
lottie是什么
lottie可以实现丰富的动画，而且一个动画材料，多端都可使用，不会说web端可以用，ios和安卓端又不能用了，极大的减少了开发成本。
使用这个插件需要和设计一起配合，设计使用AE画出动效，然后通过bodymovin插件导出json格式，我们就通过lottie解析文件，制作出动画。
优点
腾讯有对他进行了一些优点的总结
- 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
- 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
- 设计制作动画，前端展现动画，专业人做专业事，分工合理；
- 卖家秀即买家秀，还原程度百分之百；
- 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。 总结起来就是专业人做专业事、前端易控制动画、百分百还原、性能好，减少大量工作量
缺点
但目前也还是有一些缺点
- lottie-web文件本身仍然比较大，所以，需要注意lottie-web的加载。目前H5项目有离线包，PC项目也会上PWA，会对其进行缓存，保证加载速度。
- lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果
- 动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb）的问题。需要设计师遵循一定的规范。
- 有很少量的AE动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等。
第二点：这个我咋感觉不是什么问题，不能给已存在的html添加动画效果，那就直接都一块画嘛。。。
第三点：这个具体是啥规范就不太了解了，但总对来说就是他们画动效的时候进了不要让json文件太大
第四点：这个描边动画也不太懂，那么复杂的动画都能实现，为啥这个实现不了，下面找了张描边动画的图
个人感觉主要能做的一些处理方案：上线前需要对插件进行压缩处理、也需要和设计师沟通，让他们遵循一定对规范，尽量让json更小点
codepen.io/collection/… 在这个页面，有非常多的动画效果，还有对应的资源和代码，足够你参考使用了
接下来再好好深入了解一下使用吧。
