> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

# 最近用 Bodymovin 导出动画遇到的问题和解决方法

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-06-11-f2599035a378/01.png)

> 本文记录作者用 Bodymovin 导出动画时遇到的各种各样奇怪问题，并提供可行的解决方案。持续更新

## 一、渐变色导出异常

![对比截图：左侧 After Effects 中的矩形为蓝色渐变（从浅蓝到深蓝），右侧浏览器预览中导出后的同一矩形变为黑白渐变，说明渐变色导出后颜色信息丢失。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-06-11-f2599035a378/02.png "图1–1 渐变色导出异常")

渐变色导出后颜色异常，仅剩黑白双色的渐变，原因及解决方法：

原因一、使用了中文版的 After Effects，渐变填充的选项会变成中文名，使得导出后颜色异常。

**解决方法：**
方法1. 手动更改图层内 “渐变填充” 的效果为英文名或数字；
方法2. 更换为英文版 After Effects

原因二、未保存文件。

**解决方法：**
Cmd+S 设定一个路径保存 After Effects 源文件

## 二、修剪路径动画播放卡顿

制作某些路径动画我们需要在两帧内调换修剪路径的 “Start” 和 “End”，导出来的路径动画就会在这一瞬间会出现卡顿，如图 2–1：

![一个铅笔在尺子上来回循环画直线的动图。展示了直线在来回伸缩时会出现卡顿的问题。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-06-11-f2599035a378/03.gif "图2–1 修剪路径动画卡顿")

针对这个问题我发 Email 询问了插件的作者 hernan torrisi，这里是他回信的原文：

> Hi, the problem is that the player interpolates between frames by default, so it’s trying to calculate values between two consecutive keyframes.
> You can solve it by converting those keyframes to Hold Keyframes in AE, or you can call a method in the animation instance to prevent rendering in between frames: anim.setSubframe(false)

我的理解是因为浏览器动画默认帧率和导出来的 JSON 动画帧率不一致，令浏览器自动在中间播放补间动画，即把调换修剪路径数值的两帧之间的动画也播放出来了，所以解决方法有两个：

**解决方法：**
方法1. 切换较前的一个关键帧为 [Hold Keyframes](https://helpx.adobe.com/after-effects/using/keyframe-interpolation.html)（如图2-2）；
方法2. 设置禁用 Subframe，在前端代码中加一行 anim.setSubframe(false) 命令，（如图2-3）

![After Effects 时间轴截图，展示修剪路径关键帧设置：左侧关键帧参数为 Start: 100、End: 0，右侧为 Start: 0、End: 100，中间的菱形关键帧图标即为需要转换为 Hold Keyframe 的位置](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-06-11-f2599035a378/04.gif "2–2 切换关键帧类型为 Hold Keyframes")

![代码编辑器截图，展示 Lottie 动画实例的 JS 代码片段，包含 transition 和 secondLoop 函数用于切换播放片段，以及点击事件监听器。最后一行高亮显示 anim.setSubframe(false) 命令，即禁用补间帧的解决方案。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-06-11-f2599035a378/05.png "图2–3 禁用 Subframe")

## 三、在 Mask 下的修剪路径动画显示异常

通常情况下我们为一个修剪路径动画加上 Mask， 路径动画会出现显示异常，如图 3–1：

![在 Mask 下修剪路径动画显示异常的示例截图，展示路径动画在 Mask 遮罩作用下出现会将路径动画的部分进行裁剪，出现了渲染错误。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-06-11-f2599035a378/06.gif "图3–1 路径动画显示异常")

这个问题我也问过插件作者，这里是他的原文

> Yes, unfortunately browsers don't handle masks correctly when applied to strokes.
> You can add a shape group with a rectangle that covers the whole surface of the stroke and a transparent fill mode in any layer that has a masked stroke and it will correct the artifact.

我的理解是浏览器对这个效果支持有问题，所以导致问题的产生。下面直接放解决方法：

**解决方法：**
1. 在做修剪路径的图层里新建一个 Group；
2. 在新的 Group 里创建一个矩形（或圆形，不重要）将其拖放至描边效果的上方，并使其大小覆盖整个 Mask 图层。
3. 调整第一步所添加的 Group 不透明度为 0

这是作者给出的解决方法，但我个人尝试发现其实第1、3步可以省略（如图3–2），导出的动画也能正常显示。

![After Effects 时间轴面板截图，共 10 个图层，其中第 7 层为 Mask、第 8 层为 Stroke（Track Matte 设为 Alpha），展示在 Mask 图层下方直接放置矩形描边层的图层结构，无需额外 Group 或透明度设置。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-06-11-f2599035a378/07.gif "图3–2 添加矩形，解决显示异常")

以上是我近期遇到的一些问题和解决方案，在 Medium 上作记录。以后遇到问题也会在上面更新。