今天将我们在工作中遇到的AE动效落地时经常遇到的问题有哪些？该如何解决这些问题？进行集中的分析解答，以避免在后续的工作中即时避坑。

上次分享回顾：
设计分享：玩转动效 | AE常用动效落地必备指南

常见问题列表：

Q1：Bodymovin导出lottie动画，渐变色丢失问题？
Q2：导出lottie动画，文字错位或不显示问题？
Q3：Sketch文件导入AE后圆角问题？
Q4：AE里如何单独修改某个圆角大小？
Q5：如何将1个图层/预合成拆分成多段/多个？
Q6：AE如何修改合成尺寸的问题？
Q7：升级了新Mac系统后打不开MOV/MP4文件？
Q8：AE元素中心点偏移，不在元素中心点的问题？
Q9：AE内如何断开锚点的问题？
Q10：动画有用到位图，在导出lottie动画时，如何导出只有一个.json文件的动画？

Q1：Bodymovin导出lottie动画，渐变色丢失问题？

渐变色问题@2x.png
解决方法：
那是问题我们通常使用的 AE 都是中文版本，所以图层属性的命名默认也是中文的，只要我们把对应的图层渐变属性名称“渐变填充”重命名为英文“Gradient Fill”，然后渐变色就正常了；

如果是“渐变描边”则需要改为“Gradient Stroke”即可。

注意⚠️：英文不用区分大小写
image.png
命名更改后：
渐变色问题 2@2x.png
如果存在多个渐变效果，可以分别命名“Gradient Fill 1”“Gradient Fill 2”“Gradient Fill 3”…以此类推


Q2：Bodymovin导出lottie动画，文字错位或不显示问题？

文字缺失错位问题 1@2x.png
AE里面，用bodymovie导出动画后发现文字总是对不齐、文本框移位、文字显示不完全。尤其是两个icon有前后关系叠加的时候容易出现错位，是因为AE中有很多字体如果直接导出 json ，会出现不兼容问题。

其实在bodymovie的设置中，已经有一个功能，是可以解决这个问题的，这个功能就是“字体图形化”，但是在我使用过程中发现，这个功能有点不稳定，有点挑文字，有的文字转换很成功，有的文字还是会缺失或显示不全全，所以我还是建议用以下2个解决方法：
image.png
解决方法1：在 sketch 中直接对文字进行转曲；转曲后文字变成了矢量图形。
image.png
解决方法2：在AE中，选中文字图层，右键>创建>从文字创建图形即可。
image.png

Q3：Sketch文件导入AE后圆角问题？

圆角问题@2x.png
解决方法：因为AE里形状的四个圆角只能都是一样，不能分别设置不同的圆角大小。如果要几个圆角大小不一样，要在导入AE之前先拼合下，导入之后不会出问题。

选中图形，然后选择“ 图层 - 结合 - 拼合 ”
image.png
如果你是Figma文件导入AE，则需要：选中图形 - 右键 - Flatten
image.png

Q4：AE里如何单独修改某个圆角大小？

image.png
解决方法：AE的圆角大小只支持一个圆度，如果要更改圆度属性，形状的圆角都会一起变化，没办法单独改变其中一个的圆角大小；如果想要单独更改其中一个的圆角大小，就要进行以下操作：

1、先选中矩形路径图层 — 右键 — 转换为贝塞尔曲线路径
image.png
2、选中路径，用选择工具 (快捷键 V) , 在画面视图中框选需要更改的圆角
image.png
3、按下快捷键 CMD+T , 调出变形工具，跟其他软件一样，拖动操控点，就可以更改圆角啦。
调整圆角大小.gif

Q5：如何将1个图层/预合成拆分成多段/多个独立的图层？

image.png
有时候我们做效果时，经常会需要把一个图层或者预合成拆分从多段，需要的效果是上图中：时间线前（标记1）和时间线后（标记2），然在1个图层中的动画，拆成2个图层显示，那改如此拆开呢？

其实很简单，只需要选种图层，将时间线拖到你需要拆开的位置，然后快捷键：Command+shift+D（win系统：command+shift+D），即可拆成2个图层
2022-03-26 21.21.15.gif

Q6：AE如何修改合成尺寸的问题？

有时候我们做了一个动效，但是要修改下尺寸，或者下载的模板尺寸不是自己想要的。比如原尺寸是1280720，现在想要改到19201080，直接在合成设置修改话
image.png
改完后发现，合成里的各个图层尺寸并不能随之更改，结果位置完全错乱；接下来就得一个图层一个图层的调整，去重新适配新的合成尺寸，其实完全没有这么做，太费时费力。

解决方法：其实AE里直接内置了一个脚本，可以很方便的解决这个头疼的问题，我们可以在文件-scripts（脚本），然后找到AE自带的脚本：“Scale Composition”
image.png
打开Scale Composition后的选项是这样的
image.png
三个选项分别代表新的缩放比例、新的合成宽度、新的合成高度，按需求选择合适的即可。（指的都是等比缩放到相应的尺寸）

使用起来也非常简单，总结一下：
1. 首先在项目面板选中要修改尺寸的合成
2. 设置好要修改的数值（比如这里我设置成了将新的合成宽度改为1920）
3. 最后点击”Scale”按钮即可

Q7：升级了新Mac系统后打不开MOV/MP4文件？

很多小伙伴在更新了最新的Mac OS系统后，发现AE导出的MOV格式视频打不开，如下图：
image.png

解决方法：导出的时候，更改下视频编解码器即可解决；在“输出模块设置 — 格式选项 — 视频编解码器” 选择 “Apple ProRes 4444”
image.png
image.png

Q8：AE元素中心点偏移，不在元素中心点的问题？

image.png
如果你使用的是2018版本以上的AE，那么只需要在首选项里设置一下即可，首选项-常规-在新形状图层上居中放置锚点，下次绘制形状时，中心点自动居中到图形中心。
image.png
image.png
如果你使用的是2017及以前版本的AE，在绘制形状图层的时候，中心点默认是在画板中间的，如下图：
image.png
解决方法一：选择 平移(锚点)工具 快捷键 Y ，选中中心点，按住 cmd (win系统ctrl) + 鼠标左键，此时移动会自动吸附到此形状的各个角跟中心点，在中心时松手即可。
2022-03-26 19.59.11.gif
解决方法二：使用 motion 脚本快速居中中心点
2022-03-26 20.11.45.gif

Q9：AE内如何断开锚点的问题？

在AI里面如果你画完图形之后，不要某些边，可以用直接选择工具选择之后删除即可；但是在AE里面删除之后是不对的。

例如我要删除一个圆形最下方的一个锚点，首先 选中圆形 — 找到圆形路径 — 右键 转换为贝塞尔曲线。
image.png
然后用选择工具框选要删除的锚点，删除后变成了这样子：
image.png
你会发现他们还是连在一起的，那么要怎么断开？
继续选中路径属性，框选工具框选这两边的锚点，右键 蒙版和路径形状 - 已关闭 取消勾选即可。
image.png
然后就会达到我们想要的理想的效果，如下图：
image.png
这里只是以圆形为例，其他任何图形都可以用这种方法删除锚点，然后断开哦。

注：你也可以直接使用修剪路径的方式，变成你想要的图形

Q10：动画有用到位图，在导出lottie动画时，如何导出只有一个.json文件的动画？

当我们在动效中有用到位图资源时，bodymovie默认导出动画的最终文件为：1个json文件 + 1个images个文件，如下图：
image.png
很多时候我们在做lottie动画的和开发交付动画效果的时候，开发那边会说：“只要1个json文件就行”，那我们该如何处理呢？

其实在bodymovie的设置里面就有这样一个功能，叫做“转成base64—将图片包含在json文件中”
image.png
只要勾选了这个选项后，我们导出后的文件就会只有一个.json的文件。
image.png

Q11：同一个json，iOS和Android设备不兼容json文件的问题？

同一个json文件，预览没有问题，但是在iOS和安卓设备上的效果不一致。

解决方案：部分安卓系统引用高版本 lottie 库会出现不兼容问题，所以安卓需要导出旧版格式，但还是会出现不兼容问题，这里推荐降级方案，把 Body movin 版本号换成5.1.12版，基本可以解决问题。

输出lottie的注意事项：

1、首先明确自己想要做什么动画，在官方文档上查询lottie支持的属性效果。

官方属性查询：http://airbnb.io/lottie/#/supported-features
lottie支持导出的AE属性（中文文档）：https://www.yuque.com/lottie/document/supported-features

2、为避免 Bodymovin 输出后预览出错，所以在输出前确保你的所有文件确保命名和图层名为英文，避免包含中文、空格、特殊符号等等。

3、Bodymovin 输出时根据实际情况勾选对应的输出设置，如“图片资源设置”“导出旧版本的 Json 格式”等。

4、导出后json文件一定要进行预览自查，用 Bodymovin 导出文件后，上传到https://lottiefiles.com/preview中进行预览，可以手机扫码二维码在手机上预览，检测是否有问题。

注 意: 本 文 为 个 人 原 创 内 容 作 品
未 经 允 许 请 勿 转 载 到 其 他 平 台