前言：本篇文章会分为四块内容和大家分享
第一项：lottie的原理
第二项：lottie的安装与运用
第三项：lottie的弊端
第四项：总结
第一项：lottie的原理
1.Airbnb开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发。而且它还具有占用内存少，加载流畅等特点，是个极其不错的第三方库。
具体的操作流程如图
Lottie 操作流程
如上图所示，设计狮使用ae，借用bodymovin插件，就可以把设计好的动图导出为json格式给程序猿。
bodymovin插件本身是用于网页上呈现各种AE效果的一个开源库
lottie所做的事情就是实现在不同移动端平台上呈现AE动画的方式，从而达到动画文件的一次绘制、一次转换，随处可用的效果。
Lottie 官方示范
2.Airbnb 还建立的Lottie动画网站，里面有设计师制作的动效可供参考https://www.lottiefiles.com
Lottie动画网站
第二项：lottie的安装与运用
1、软件准备(以苹果系统为例)
AE下载：http://www.gfxcamp.com/after-effects-cc-2018/
Lottie 下载：https://github.com/airbnb/lottie-ios 下载之后选择bodymovin安装
2. 安装插件
下载 After Effects 插件安装器ZXP Installer（有 Windows 和 Mac 版本）
运行ZXP Installer，按照指示拖动bodymovin.zxp到其窗口，即可安装完成
拖动安装bodymovin.zxp.png
安装成功后，如图所示：
安装成功
3.运用
打开AE，选择首选项的常规，勾选允许脚本写入和访问网络
首选项
勾选
重启AE
制作动图
导出时打开窗口扩展的bodymovin
导出bodymovin
导出文件设置
导出格式选择
第三项：lottie的弊端
不同平台Lottie支持AE的特性，可参考Supported After Effects Features · Lottie
在使用 After Effects 制作动画时，建议先预览上述网页，以知道应该使用哪些特性制作动画，因为若使用 Lottie 还不支持的特性，如3D图层，则 Lottie 会无法正确渲染。
由于这些限制，目前可制作的动图更多为路径改变的动画，比如加载动画、提示动画、刷新动画等。
第四项：总结
在做设计的过程中，遇到简单的动效，用Lottie可以快速实现，减少前端的工作量。但是也不用过度依赖Lottie，还有gif，vedio等多种方式实现，更多关于粒子特效的可以ae制作完成让前端写出来。所以方法多种多样，适合自己的就好。
网友评论