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

一、渐变色导出异常

图1–1 渐变色导出异常
解决方法:
方法1. 手动更改图层内“渐变填充”的效果为英文名或数字;
方法2. 更换为英文版 After Effects
解决方法:
Cmd+S 设定一个路径保存 After Effects 源文件

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

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

图2–1 修剪路径动画卡顿
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)
解决方法:
方法1. 切换较前的一个关键帧为 Hold Keyframes(如图2-2);
方法2. 设置禁用 Subframe,在前端代码中加一行 anim.setSubframe(false) 命令,(如图2-3)
2–2 切换关键帧类型为 Hold Keyframes
图2–3 禁用 Subframe

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

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

图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
图3–2 添加矩形,解决显示异常

广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store