1天搞定动效落地

以前UIUX项目基本是Web和小程序，使用Principle制作动效并提供动效标注文档来交付动效。这次设计一款APP，产品经理要求标签栏Icon动画，最初沟通需求时说提供GIF，GIF在导出时边缘有毛边、透明背景、位图需压缩等问题，开发建议提供Json。要提供Json的话就需要Lottie，而我之前没有使用过AE，在网上查阅了各种教程也踩了坑后，很短时间内还是搞定了。于是我想把经验写下来，也供有相同需求的设计师快速上手AE、Bodymovin、Lottie。

Lottie是一套库，可以跨平台解析显示Json文件。Bodymovin是AE上的插件，需要下载zxp安装器安装，用于导出Json。流程：figma静态稿 → 导入AE → AE做动效 → 使用Bodymovin渲染导出Json → 测试验证

https://lottiefiles.com/integrations 如果你能使用cavalry就不用使用AE和Bodymovin。

Lottie中文使用文档  https://www.yuque.com/lottie/documentlottie_零基础入门_写给设计师  https://juejin.cn/post/6844903844174888974动效落地之LOTTIE动画  https://www.ui.cn/detail/585524.html动画输出新手向！使用BodyMovin和Lottie的避坑指南  https://www.zcool.com.cn/article/ZOTk2MDgw.html如何快速交付动效，少走弯路?  https://www.zcool.com.cn/article/ZMTIwMzEzMg==.html那些年被Lottie坑过的地方  https://zhuanlan.zhihu.com/p/59794085想用 Lottie 做动画？先收下这份常见错误和解决方法总结 https://www.uisdc.com/lottie-common-errors-and-solutions

Lottie - 轻松实现复杂的动画效果 https://juejin.cn/post/6844903661760413704前端懒人神器--lottie动画库使用指北 https://segmentfault.com/a/1190000038295942

中文版本在插件、表达式上有不支持的情况，安装英文版本一劳永逸。如果你的AE在你安装时选择了英文安装后依旧是中文版本，进入AE的AMT文件修改语言。

1.找到AMT文件夹，右键用文本编辑打开application.xmlMacintosh HD系统盘→资源库→Application Support→Adobe→After Effects版本号→AMT→application.xmlAE2021的文件夹是After Effects进去18.0

2.Ctrl+F搜索installedLanguages，zh_CN是中文，en_US是英文，改成en_US后关闭重开AE。

3.在中文的MAC系统上，打开修改后的AE会提示授权错误，就需要把MAC系统也改成英文。系统偏好设置→语言与地区，将所需语言拖移到“首选语言”列表的顶部。如果所需语言未列出，请点按“添加”(+) 按钮来添加所需的语言，重启Mac。

网上教程有两种方式，1是导出为svg后再转成AI文件或使用图片格式导入 2是使用AEUX。

如果你选择第1种方式，1.需要在AI里把每个层转换为单独图层文件，不然AE无法识别图层。见：在AE导入Illustrator 矢量图形 https://zhuanlan.zhihu.com/p/45103630

2.在MAC系统里AE里使用AI文件作为素材源，需要使用AE的「从矢量图层创建形状」重新绘制让它在AE是矢量路径，不然渲染后依旧是位图格式，还可能会丢失图片。

见：Bodymovin导出Json文件避坑指南  https://www.jianshu.com/p/18a7e7c25464

3.在AE里载入素材时不要勾选illustrator/pdf/eps序列

之前我踩的坑是在Lottie Preview、Bodymovin、Html都可以预览播放，但在Lottie editor里就是不行，显示图片丢失。我已经根据西西说的把素材源AI文件换成了PNG后渲染依旧不行，最后是渲染设置里开启了把图片资源保存在JSON才解决的。

位图和矢量格式区别，位图加载慢但渲染快，矢量渲染物理像素越多越消耗性能，根据项目需要和渲染动画的大小来决定使用位图还是矢量。

官方下载地址  https://aeux.io/guide/download.html

安装：1.figma里文件每层需要flatten，不要有布尔运算的层，复杂的文件可能导入后有问题，要试试看。2.需要AE和figma都安装AEUX，版本要一致，使用上面官方地址的版本。

AE插件使用zxp安装器安装  https://aescripts.com/learn/zxp-installer/点开后，选中软件把zxp安装文件拖进去就可安装

figma的安装在figma里的plugin → development → create plugin下，添加json文件

导入：1.先设置AE里AEUX的合成设置，窗口 → 扩展 → AEUX

2.设置导入的倍数，帧数和合成时间，默认是@3x，60fps，秒数是5秒，帧数可以设为30fps。

3.在figma→plugin → development → AEUX，点击send selection to AE，文件就直接以合成的形式进入AE了。

AE动效入门教程  

https://www.bilibili.com/video/BV14J411k7MS?from=search&seid=17563466568228898528

有其他动效软件基础的话，看1.新建项目和导入 3.基本动画的运用 4.曲线动画的运用 了解素材导入、合成设置、K关键帧、曲线面板，基本AE使用就没问题了。素材名和合成名需要英文命名。

英文最新版  https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp插件中文版  https://github.com/bigxixi/bodymovin_cnAE插件使用zxp安装器安装  https://aescripts.com/learn/zxp-installer/

1.AE里首选项 → 脚本和表达式里，将允许脚本写入文件和访问网络选项勾选上。

2.打开Bodymovin，设置电脑里存储路径和设置

3.设置里勾上这几项Assets图片资源设置：Original Asset Names保留图片名称，Include In Json把图片资源保存在JSON，这个选项在以前版本叫转成base64（将图片资源转换成base64代码并一起保存到Json文件中）高级导出选项：Export old Json format 导出旧版JSON格式如果是位图，还可以勾选复制原始素材文档和开启压缩

4.选中后，点击Render渲染，生成JSON。因为已经选择了把图含在JSON里，生成的文件就只有一个JSON文件

https://lottiefiles.com/editor

https://lottiefiles.com/tools/json-editor

在editor里能播放能看到图，就开心的发给开发吧