保姆级教程|Lottie动效设计完全指南
一篇文章帮你了解AE动画插件Lottie的前世今生
01
最近一周负责公司在线客服产品线H5页面，其中需要设计客服点击入口的动效，动效设计是UI设计中不可缺少的一部分，第一次我选择的方案是拿AE设计好GIF图交接给开发，但后来产品提测的时候发现自己踩了好大的坑，GIF的锯齿让客服点击入口动画毫无违和感，更不要说提高用户的点击率了。看来都2021年了，GIF基本只会出现在两个地方，一个表情包，另一个是类似于澳门赌场的广告闪烁。GIF这条路走不通之后和之前的动效设计师同事交流和资料的收集之后，选择了lottie动画的交付方式。
-
色彩空间只有256色，比jpeg，png少很多，画质也差了许多
-
只支持0或100的透明度，设计师经常会在icon边缘处加入投影，可能会引起毛边
-
体积比png序列帧的图可能还要大，比如，相同的40帧动画图，GIF体积为142kb，而png经过tinypng压缩后为42kb
-
没有可控性，GIF图是预先导出好的动画序列，但CSS逐帧动画是由CSS animation来控制播放进度
Lottie 是 Airbnb 开源的一个动画渲染库，同时支持 Android、iOS、React Native 平台。Lottie 支持渲染播放 AE 动画。通过 AE 插件 bodymovie 导出 json 文件作为动画数据。Airbnb的开发者将其作为一个开源平台，不仅是为了免费发布，也是为了打造一个社区。他们创建了一个github地址（https://github.com/lottiefiles）来与设计师和开发进行交流。这是一个与时俱进的好主意，使得Lottie得到快速发展。
【加载动画】
【动态banner】
获取 bodymovin ，该插件的版本非常多，并不一定最新版就适用于你当前的项目，因为前端使用的 bodymovin 解析包可能无法解析你用最新版 bodymovin 插件输出的 json 文件。这里推荐两个常用的版本 5.5.8 和 5.6.4版本。
路径为在「 AE-首选项-常规 」中勾选「允许脚本写入文件和访问网络」，英文路径就是「Adobe Effects」-「Preferences」-「Scripting&Expressions」-勾选「Allow Scripts to Write Files and Access Network」，如下图：
安装完成后即可在窗口>扩展>bodymovin（Window> Extensions> bodymovin）中找到 bodymovin 插件
设置关键选项并保存
渲染并完成导出
5.导出之后预览文件并交付json文件给开发
6.Lottie支持的AE属性
Lottie虽然能够满足多种场景需要，但是并非支持所有的 AE 效果。设计制作时，需要考虑该效果是否支持。否则，会导致出错或者所用效果无法生效。Lottie虽然能够满足多种场景需要，但是并非支持所有的 AE 效果。设计制作时，需要考虑该效果是否支持。否则，会导致出错或者所用效果无法生效。
04
总结
