Lottie是Airbnb推出的一种SVG动画解决方案，它可以跨平台播放，并解决了动画难落地的问题。当设计师做完动画只需使用bodymovin将动画导出成文件再丢给前端，前端就能非常快速的引入文件和播放动画。对于lottie的初级使用经验，本站已经有其他人进行过总结和分享所以这篇就不再做赘述。但是实际在使用AE+lottie制作动画的时候往往会碰到各种问题，所以今天我就结合我做的礼物动效案例来和大家分享一下使用这个方案制作动画时常见的错误和解决方法。

       使用AE+lottie的方案制作SVG动画，精神要领就是尽量脱离插件和辅助效器，以最质朴的方式制作SVG动画。由于动画在不同的播放端所支持的功能有略微的不同(具体可见下图),所以在制作的时候我们就要根据最终动画的承载端所支持的功能去设计动画的方案。http://airbnb.io/lottie/#/supported-features

第一类：动画demo页面一篇空白，动画未成功加载出来

 导出动画无法显示是刚开始使用lottie的设计师经常遇到的问题。出现这样的情况我们右键网页，选择“调试”（chrome）或者“检查模式”（edge）来查看网页的源码和console中报错的提示内容。如果你完全看不懂播放端的报错提示，可以请你们前端小哥哥来帮你解读一下。

大多是情况下，这个报错的提示能够大致知道为什么无法播放，

案例1.1 使用第三方动画素材并导出成SVG动画

        这里我使用了RTFX插件其中的一个爆炸素材来进行说明。在导出动画后，demo页面空无一物。然后我们来看一下console中的报错提示：

提示结果时由于numkeys无法生成动画。那么我们回来动画文件当中发现在最外层合成的时间重映射下包含一个表达式:

T=thisLayer;if((T.marker.numKeys>1)&&(numKeys>3)){sIn=key(2).time-key(1).time;sOut=key(4).time-key(3).time;eIn=T.marker.key(1).time;eOut=T.marker.key(2).time;if(time

这是一段调整重映射速率的代码，那我假设我不需要调整速度，所以我直接删除这段表达式，再来看看里面的子合成是否会报错。结果图片能显示但是浏览器依然报错了。

这回是 ”Cannot read property 'layer' of undefined “这个错误。那么这个错误非常的常见，出现它往往意味着你的动画图层中运用了一些不支持的效果器或者表式。

        所以想要直接从第三方的素材包导入素材往往各种错误，因为这些插件为了让使用者能充分的自定义风格和颜色，往往运用了很多自带的效果器和表达式。如果你想要使用这些素材，那么就得删除那些不支持的表达式、不支持的插件，同时你还必须深入查看动画文档的结构，并检查图层中是否运用了合并路径或者是图层混合模式等等。这些插件和表达式删除后，如何通过SVG动画支持的方法去重构这些效果又是一个问题。由此得知套用第三方的素材需要调整很多的内容，还不如自己做。建议在你还不是很了解SVG动画时，不要使用第三方的素材。

案例1.2 使用Joysticks 'n Sliders显示报错，无法显示。

        目前bodymovin支持duik、Joysticks 'n Sliders、rubberhose等主流的骨骼绑定插件的大部分功能。但是在使用这些插件制作人物动画或者骨骼动画时需要在导出时修改bodymovin的设置。因为这些插件生成的合成结构会包含guides图层，或者一些隐藏的图层，同时表达式又指向这些guides图层，所以在导出的时候需要根据文档的结构勾选hidden和guides两个选项来导出这些图层。这样动画大部分情况下就可以正常加载播放。

        除了之前的lottie功能支持表外， 你还可以在这个页面找到bodymovin目前支持的AE的功能：https://github.com/airbnb/lottie-web/wiki。

第二类：demo页面的动画与AE中的不同

        在解决了第一类完全无法加载动画的问题后，我们进入第二类问题，那就是导出的动画和AE中显示的效果不一致。在这一类中我只列举了我遇到的问题，如果你有遇到问题且自己解决了，欢迎在评论区留下评论，以让更多人知道如何解决它。下面我们来看看具体有哪些问题：

案例2.1 渐变无法顺利导出

        这个情况之前我想大多人都遇到过，包括很多其他的分享中也有提到。原因是因为在非英语编码下，插件无法执行获取渐变数据的代码。解决方案如下：

        根据bodymovin作者hernan的介绍，AE中的渐变信息是存储在AEP文件当中，所以在你导出渐变的时候务必先保存文件。另外由于编码和语言的问题，渐变还是会导出不成功，咱接着往下看。

        Mac系统的用户

        1.将AE的程序语言改成英语。

        2.将动画文件中的“渐变填充1”改为“Gradient Fill 1 ”

        3.保存工程，即可顺利导出渐变信息。

        Windows系统用户

        除了上面的操作外，需要在1和2的步骤中更改系统的“非unicode程序的言”，方法如下：控制面板>时钟和区域>更改日期、时间或数字格式>管理>非unicode程序的语言>更改系统区域设置>选择英语（美国）,然后重启电脑。（注：此更改会导致系统中其他的部分软件出现乱码现象，所以在导出完成后需要再次改回你原来的中文）

案例2.2 自带效果器无法导出  

        从上文的链接中，我们知道目前bodymovin仅仅支持 Drop Shadow /Fill/  Pro Levels or Levels (Individual Controls)/  Tint/  Tritone/  Stroke (partially)这几个AE的内置插件，所以可以说绝大部分效果都无法被支持，所以自带的效果器的效果自然无法在播放端显示。

        我以echo这个内置插件做了一个参考效果，对比就能看得出两者差别。既然默认的插件不支持，那么我们就得通过其他的手段来复刻这个效果。那么我们可以复制多个形状图层，并在positon中使用表达式valueAtTime()去模拟echo这个拖尾的效果。如果有需要的话，未来会分享更多的技巧。

案例2.3 素材缺失导致无法显示 

                使用bodymovin导出动画后你会获得一个json的文件。那么在默认的导出设置中，位图等信息都是通过二次渲染并将渲染后的图片放在json文件的同级目录中的images文件夹中，所以如果有一些动画必须要使用位图，那么有两种选择。

        第一就是将附带的images文件夹一同给到前端；第二种就是在导出设置中assets>include in json,选中这个选项。那么bodymovin会在导出的时候将位图信息转成字节码并保存在json文件当中。这样当前端播放的时候就会自动解码图片，但是有的时候字节码站的空间比jpeg更大。

        所以在位图素材不是很大的情况下第二种方案更好，如果在一个工程中位图有很多，那么建议使用第一种方案。另外，将矢量文件导入AE后记得转换成形状，这样在导出后就不会丢失矢量素材信息。

案例2.4 wiggle等表达式效果不一 

        虽然AE中使用JavaScript作为表达式的语言，但是实际上它和网页支持的JavaScript有些许的不同.根据hernan所述，表达式的转换在导出时会进行评估，所以并不是虽有表达式都可以在播放端完美的运行，wiggle函数就是一个典型例子。

        在动画中，我对postion添加了wiggle(5,50),但是动画在网页中显示的时候就如鬼畜一般，频率和偏移量都不对。这是由于目前没有办法还原AE当中的wiggle表达式。要解决这个问题，我们只需要在导出的时候将wiggle表达式烘焙成关键帧即可。

        随着bodymovin的更新迭代，目前大部分常用的动画制作表达式都慢慢被持，但是如果你的动画文件不需要在前端做任何形式的交互，那么建议是将表达式烘焙成关键帧，以减少播放端的计算压力。

案例2.5 路径动画在播放端闪烁或者变形异常

       首先要说明的是路径动画顺滑的前提是每个路径变化关键帧锚点数量相同，锚点的起始位置和锚点走向相同。

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

        方法一：将路径的关键帧类型改成Toggle hold keyframe，这样前端播放就不会计算中间的数据。

        方法二：在前端用JavaScript为动画添加“anim.setSubframe(false);“,这样前端的播放就会遵循AE当中的帧率来播放动画。

        好啦，常见的几类错误和解决方法先归纳到这里。希望对正在使用lottie方案制作动画的小伙伴有帮助。最后放一些我们工作室做的比较复杂的SVG动画，并附上下载地址。如果文章反响好的话，以后我再接着给你们分享一些用lottie制作复杂动画和交互动画的方法。Bye~

通用特效

玉米火箭动画    https://lottiefiles.com/share/h1N6kc

火箭动画     https://lottiefiles.com/share/8lNGhm

胡萝卜飞机动画     https://lottiefiles.com/share/cx3U9h

超级火箭动画       https://lottiefiles.com/share/iy1Om0