1天搞定动效落地-流程复盘 Figma AE Bodymovin Lottie

aime_chan

昆明/艺术工作者/4年前/2280浏览

版权

aime_chan

1天内快速上手AE、Bodymovin、Lottie、AEUX

背景

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

开始前准备

1.了解流程

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

2.了解哪些软件可以支持Lottie文件导出

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

3.在开始前先阅读基础入门和防坑免异常指南等

Lottie中文使用文档 https://www.yuque.com/lottie/document
lottie_零基础入门_写给设计师 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

4.了解开发怎么用Lottie

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

安装和导入AE

1.安装AE

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

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

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

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

2.导入AE的方式，素材源格式的选用

网上教程有两种方式，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才解决的。

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

3.使用AEUX导入

官方下载地址 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做动效

AE动效入门教程

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

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

使用Bodymovin渲染导出Json

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

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

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