如何快速交付动效，少走弯路?

从2016年开始接触各种实现动效的方式，经过动效关键帧标注、SVGA、以及CSS插件，直到现在使用最多的bodymovin，相信很多朋友们在使用过程中，和我一样遇到很多显示异常或者性能待优化甚至导出失败的情况。因此结合lottie官方文档和在实际工作中遇到的问题做一下总结分享。

一、交付方式对比

选择适用于当前状况的交付方式，了解各方式的优缺点是首要解决的问题。

GIF最广泛的使用大概就是表情包了，作为一个古老而简单的方式，显然跟不上时代了。

尤其对于渐变效果和带有透明度的效果非常鸡肋，原因就是他的取色方式：

GIF的取色范围最大2的8次方，也就是256色，这点和其他格式对比之下，效果很差，渐变的效果会被压缩成一条一条的分层，因为它没有足够的颜色来过度，在尺寸比较小的情况下显示还不会太明显。

另外就是带有透明度的GIF导出会有明显的“毛边”，曾经尝试过各种彷色方式和去掉描边，效果都不是非常理想，因此实际使用中出场率很低或作为初始预览来展示。

帧动画更多运用在游戏特效上，如技能的特效：火术、雷电、冰冻等等，这类的效果我习惯使用flash（现在叫Animation）完成，动画多是一帧一帧画加上动画补间和形状补间过度，AE和flash都有可以导出APNG/WEBP的插件。确定是还是文件过大，需要进行一定的压缩。使用压缩软件以及减帧都可以减小文件大小，但是流畅度和画质会受到一定的影响，在大小和质量之间做取舍。

这个基本上是最少使用的方式了，AE渲染选择带有Alpha的mov视频，可以使用QuickTime播放预览，因为文件太大大多做预览效果的展示。

新版的AE导出时QuickTime会无法播放，只需要修改一下解码方式就好了，如apple prores 4444，就可以完美解码播放啦。

这个是在做直播礼物初期的实现方式，通过写出关键帧的参数，让开发去根据参数做出动画。这个方式能做出的效果非常多，几乎所有效果，包括粒子都可以实现，至于还原程度，取决于开发同学，需要对动画有一定的理解能力，还有探索新事物的勇气以及耐心。缺点是制作时间周期较长，学习成本高。

列出的表格如下图所示：

后期为了缓解开发的工作量，实现快速协作迭代，尝试使用SVGA的方式。

SVGA是YY开发的一款同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式，它的好处是可以当成 GIF 图片来用，不需引入第三方库和学习新的操作方案（比如 Lottie）。

SVGA多用于直播礼物的导出，支持的动画效果也有限，最好先处理好成位图再用AE或Animate制作。

CSS第一次接触就是西西大佬的《网易云音乐2018年度听歌报告》那篇文章，它兼容性好，完美解决了H5上的动效，且不需要第三方库支持。结合了精灵图工具，有了更多的可能，lottie不支持的效果如扭曲，变形等也可以导出，导出产物只有图片和 CSS + HTML代码，做H5的动画不妨学习尝试一下。

Lottie就不多介绍了，支持多平台，使用同一个JSON动画文件，可在不同平台实现相同的效果， 实现动效

对研发来说需要引入第三方库来播放Lottie，项目文件体积会适当的增加一些，如果团队中还没有引进库，可以学习一下用法（GitHub上面有）。

附上地址

iOS： https://github.com/airbnb/lottie-ios/releases/tag/2.5.3

Android：https://github.com/airbnb/lottie-android/search?q=lottie&unscoped_q=lottie

但是Lottie也不是万能的，有一定的局限性，并且导出有很多注意事项，作为现在最常用的交付方式，今天来总结一下导出Lottie遇到的问题和解决办法。

二、导出json免异常总结

动画效果一定要简洁，学会精简动画，否则会影响性能和文件大小，运行起来有可能发生卡顿。

1.1 导出的矢量图层使用1X一倍图

sketch做的素材导出到AE时，使用1X 一倍图，以保证文件最小，例如做一个@1x尺寸下30x30的动画，我一般会放大到90x90然后导出1x图，而不是直接用30x30的素材导

出3x图，后续可以在AE中调整素材的大小。

导出的png图片素材，还是可以继续使用软件压缩，使整个文件更小。

1.2 善用父子关系

当同样的动画在不同的图层时，可以利用空图层来控制多个图层，在空图层统一做动画，可以减少很多重复的代码。具体方式为：新建Null layers并设定可见，透明度为0%——将多个图层父级连接到Null layers上——在Null layers统一开始K帧做动画。

1.3 保持图层简洁，减少预合成的嵌套

制作过程中，经常会出现多个嵌套的复杂关系动画，即一个预合成文件中嵌套了多个预合成文件，甚至会一个套一个（禁止套娃！）。

可能是因为使用ps的时候很喜欢嵌套智能对象，一个套一个，然后就会发现ps快卡爆炸了。所以在AE中要改掉这种习惯，会对性能产生负面影响动画的呈现会卡顿。

1.4 少用路径动画

类似 Antotrace路径跟踪和wiggler抖动这些效果会对每个关键帧的定点都添加数据，会使得json文件变得大，在播放端会闪烁或者变形异常，尽量做一些k帧完成的轻量的动画效果，酌情精简动画效果。

Lottie 在渲染SVG动画时它的帧率是超过 60 帧的，而我们制作动画时帧率会放到 24 或者 30 帧，甚至更低。而Lottie在播放动画的时候会根据关键帧数据自动计算这些多余的补帧。由于上方的动画在 AE 当中是逐帧，所以形状的变形过程是看不到的，但是在播放端帧率会变高，变形过程就能被眼睛看到。同时由于制作这些路径变形动画没按正确的方法制作，所以就会在播放端看到变化异常或者播放画面抽动闪动的现象。

1.5 少用alpha遮罩

遮罩蒙版类的动画，如果形状比较规则，如方形、圆形，我会麻烦研发兄弟设定一个容器来播放，而不是本身动画使用蒙版，因为确实对性能有一点影响。

如果是必须要使用遮罩的效果，那就缩小遮罩的范围，遮罩的大小也会成为计算的范围。

重名可能会导致Lottie在处理过程中将相同名字的合成错认。名字使用中文也可能会导致导出动画显示异常。

2.1 所有的合成名字、图层名字不要重名；

2.2 所有的合成尽量以 comp_开头，尽量使用英文；所有的图层名字尽量使用英文命名；（其实就是拼音）

3.1 不支持ae效果菜单中的任何一项

除了Drop Shadow、Fill、Pro Levels or Levels（Individual Controls）、Tint、Tritone、Stroke（partially）这些插件，各种自带效果就不能用了，放弃那些花里胡哨，朴实一点吧。

3.2 不支持表达式

不得不承认，我在做一些演示动画的时候，都很喜欢用表达式，既方便效果有很好，如回弹表达式是我使用做多的一个，纵享丝滑，但是Lottie就是不支持。

想要这种丝滑的效果，对应ios和安卓都有各自实现回弹效果的方式，调整几项数值就可以轻松实现。

3.3 不支持混合模式

正片叠底、叠加这类的混合模式是不支持的，因此还是在sketch和ps中做好位图导入比较好。

3.4 不支持图层效果

图层添加阴影，颜色叠加，描边等都是不支持的，这点需要注意的是从sketch中直接导入到AE的时候，有些矢量图形在sketch中是有图层效果的，导入到AE中最后导出都会变成黑白色。

3.5 对渐变动画表达不稳定

其实渐变色的动画是支持的，但是有时候会显示不正常。出现这种情况的时候可以检查一下：

-检查预合成是否有重名

-检查预合成的命名格式是否是出现中文

-尝试渐变图层命名为英文「渐变填充1」改为「Gradient Fill 1 」

-如果还有问题，安装英文版的AE

-有时在bodymovin中渐变色动画会显示为黑白色，这个时候可以导出html的demo文件用浏览器预览一下，有时是sketch导入的渐变不支持，有时是bodymovin本身导出的问题，关于渐变的问题还可以在代码中直接修改，可以都尝试一下。

3.6 只支持路径蒙版

有的动画需要用到蒙版，比较快速的方法是图层蒙版，可以单独调整各个图层，但是却是无法导出的。只要改成路径蒙版就可以轻松导出。

以上为常见的不支持内容，其他的可以参照以下的表格

4.1 sketch导入AE的的插件

AEUX是目前为止比较稳定的插件，需要sketch和AE各安装一个插件，具体安装和使用方式可以参考以下链接：

https://www.zcool.com.cn/article/ZMTE1OTA4OA==.html

4.2 动画预览

预览动画可以通过demo或者Lottie app来预览。

Lottie App预览在 Preview Tab 页面下，有个 “Enter a URL to a json or zip file”

5.1 交付的时候千万要记得点更多导出设置里的导出旧版本的json格式。

5.2 养成所有的文件和合成命名都是英文或拼音的形式，这个和UI的命名习惯是一样的，善用“_”这个符号可以让文件看起来很整齐很清晰，好的命名在寻找问题和素材的时候大大提高了效率哦~

最后，做动画动效真的是一个很头秃很考验耐心的事情，尤其是导出出错的时候非常想砸电脑。但是我非常乐在其中，一起探索新的工具，新的呈现方式是一件非常有成就感的事情。