Lottie动画工具是适用于Android和iOS的移动库,它可以使用Bodymovin解析以json格式导出的Adobe After Effects动画,并在移动设备上进行原生渲染!
Lottie 在不需要对代码进行重写的情况下让工程师更加方便的创建更丰富的动画效果。有了 Lottie 你就不再需要使用 Gif 动画来展现效果。
目前,Lottie支持路径修剪,蒙版、遮盖等操作。此外还有一个可选的缓存机制,对那些频繁使用的东西能够更快加载。这款应用的目标就是帮助开发者和动画师能够更轻松的为应用创建动画,从而在整体上提升互动因素。
lottie优点
Lottie方法方案是由设计师出动画,导出为json,给前端播放。所以,使用Lottie方案的好处在于:
1、动画由设计使用专业的动画制作工具Adobe After Effects来实现,使动画实现更加方便,动画效果也更好;
2、前端可以方便的调用动画,并对动画进行控制,减少前端动画工作量;
3、设计制作动画,前端展现动画,专业人做专业事,分工合理;
4、卖家秀即买家秀,还原程度百分之百;
5、使用lottie方案,json文件大小会比gif文件小很多,性能也会更好。
lottie不足
使用Lottie方案有以下不足之处:
1、lottie-web文件本身仍然比较大,lottie.js大小为513k,轻量版压缩后也有144k,经过gzip后,大小为39k。所以,需要注意lottie-web的加载。目前H5项目有离线包,PC项目也会上PWA,会对其进行缓存,保证加载速度。
2、lottie动画其实可以理解为svg动画/canvas动画,不能给已存在的html添加动画效果;
3、动画json文件的导出,目前是将AE里面的参数一一导出成json内容,如果设计师建了很多的图层,可能仍然有json文件比较大(20kb)的问题。需要设计师遵循一定的规范。
4、有很少量的AE动画效果,lottie无法实现,有些是因为性能问题,有些是没有做。比如:描边动画等。