为什么推荐

记得在会议上，演讲结束后，有人问了一个我一直想问的问题：

Adobe推出了HTML5动画设计软件An（Adobe CC）。 为什么不使用An而是使用这个方法呢？

发言者回答说An的前身是Flash，它生成的H5动画是用js编写的（使用库），后期修改和维护会比较复杂。

确实，使用之后不难看出，它的灵活性确实很高，而且json形式的动画远比js写的动画更适合跨平台。 给我留下了深刻的印象，我给了它10086个赞。

学习总结不足：

1.如果渲染的动画是AE中创建的矢量元素，则直接生成json代码。 如果动画中有导入的位图，则编号的图像文件将导出到图像文件夹中。

2.在AE中制作动画时，注意合成嵌套不要过多。 某些动画可能无法在本机环境中渲染。

3、使用AE的朋友可能会注意到，上面的WD动画使用了修剪路径的效果。 这里提醒一下，使用该效果时，不建议同时修改start、end等多个参数。 渲染出来的效果会稍微有偏差。 那么路径动画的值越大，误差可能就越大，需要手动调整。

4、原生环境运行json动画时，启动有延迟。 因此，不适合在对动画时间有精确要求的项目中使用。

5. 5.0以下的机型将不支持SVG动画，所以连接时需要做好准备。

优势：

凯撒的归凯撒，上帝的归上​​帝。 让设计和开发各自专注于自己的领域，而不必担心动画实现过程中的一些复杂的细节。 而且只要保存了AE源文件，我们就可以随时导出替换json文件，方便动画调试。 了解一些基本前端代码的朋友甚至可以发挥想象力调试一些有趣的原型动画。 一组json文件可以同时满足不同Web原生环境的动画制作需求。

相信会持续迭代升级，开放更多定制参数。 如果您有兴趣，请下载并尝试一下。

生产要领

由于是用来适配移动图书馆的，所以最好只在PC上使用。 如果您想在多个版本上使用它，您需要选择正确的版本。

如果你不是做移动开发的，可以忽略下面的一半，但是建议阅读下面的绘图要点。

入门、使用前需要确认的事项

• 请确认好你们使用的bodymovin版和两个客户端不同的版本

不一定是最新版本适用，这是一个误区。 因为是多端协同工作，这里可能有最新版本的5.5.6，但是并不代表端就可以部署并使用最新版本的json文件，所以在使用之前，一定要确认设计师和客户可以使用。 的版本. 我将在下面发布我找到的最后一个版本以确认作为示例供您参考。 那么您可以在哪里找到并测试适合您的版本呢？ 接下来我给大家解释一下。

• 如何找到合适的插件版本？ AE使用的各种版本可以在上面找到。 下载各个版本只需下载对应的压缩包，然后解压即可找到对应的你想要的插件。

插件下载：

• 如何找到适合您的程序版本？

其实具体这个我也不清楚，但是我们自己的程序看看他们的相关资料。 我相信程序员总会有办法的。 这是它们对应的 URL。

安卓：

iOS：

• 如何测试版本之间的兼容性？

  大原则：一个版本的bodymovin输出的json文件可以在两个客户端app上运行，并且它的动画和设计效果是一样的，就代表它们兼容。   测试的时候，你需要准备iOS和安卓两个不同机型的手机，然后分别下载他们对应的软件即可。iOS的叫「Lottie preview」，安卓的叫「Lottie」。若最终手机上看到的效果是和自己原效果一样，那就代表这个动画生成的json文件可以在这些版本的客户端上使用。因为手机可以看到，就代表当前客户端app的版本可以编译到这个版本的json文件。    如果高版本的bodymovin输出的json文件客户端app运行不到，那就试试低一点的版本吧。   • 怎么下载较早之前的iOS/安卓Lottie app？

当我们遇到应用市场正式发布的应用版本不适合我们的动画json文件时，我们如何找到之前的应用包进行测试呢？ 答案还是在上面找到的。 因为最新版本的iOS与我第一次测试时的版本完美匹配，所以我没有太多检查。 以下是查找 应用程序包的方法：

 1. 找到Lottie-Android的GitHub网址，点击release   ：https://github.com/airbnb/lottie-android

 2.查看对应的版本有无apk包下载

• 如何检查该json 文件的当前版本？

再次强调一下，json文件的版本等于版本。 那么如果你目前只有一个json文件并且你不知道它是什么版本，你如何检查它呢？ 很简单，用代码编辑器打开就知道是什么版本了。 如果您的计算机上没有安装任何代码编辑器，也可以通过在笔记本中打开来查看。

绘图前

• 请仔细阅读官方文档，它不支持所有动画效果的输出。

试用之前，老板让我先试试我们的常规动画，看看有没有不能输出的动画。 然后我尝试了我们自己的动画中常用的渐变、描边、透明度和模糊。 结果插件最终导出只支持两个。 因此，在使用之前，一定要测试一下是否能够达到你的效果。 并且一定要阅读官网上写的特效支持文档！ 查看不同终端支持的效果是否相同！

支持导出效果：#/-

• 不支持AE表情输出

其实这个和第二点是一样的，官方文档也这么说。 但因为这个很重要，所以必须提醒大家，不要踩到陷阱啦~如果想要做出抖动效果，自己K帧就可以了。 如果你要做循环效果sketch怎么导出ai文件，就交给程序吧！ 因为转成json文件后，程序就有了更大的发挥空间。 （循环、换色等程序可以帮助你）如果你想和程序员沟通，强烈建议不同的客户阅读文档。 我会给你一个网站，然后让你的客户得到他们需要的东西。

文档官网：#/

• 检查测试是否支持特殊画面效果

这里所说的图片特效是指你画的或者ai中的图片是否可以支持导出，以及图片导出后是否会出现错位效果。 这一步非常重要。 如果在不知道自己常用的特效是否支持的情况下就贸然投入，以后会浪费更多的时间。 以下是我老板要求我确认的内容。 你可以参考一下。 （和往常一样，我崇拜这里的老板）。

创建动画之前

• 使用 AE 中的“从矢量图层创建形状”使动画材质可编码

我们通常使用AI或者AI绘制动画图片，然后导入到AE中。 但最好的解决办法是在AE中重新绘制图像。 要在AE中重绘，您需要使用“从矢量图层创建形状”。 因为设计师把图片“画”进AE后，连图片包都不需要了。 他只需创建一个动画和一段代码即可。 这样就节省了大量的沟通时间，解决了适配问题。 这里有两种方法供您参考。

  1. sketch导出svg格式后转成.ai文件

第一种方法比较复杂，但是不会出错。 其实就是把剪切出来的图片转成ai格式导入到ae中然后创建形状。 不过，经过这样处理并导入AE后，形状可以保留更多的编辑效果。 具体步骤如下：

         1.sketch里面把切图导出svg格式          2.svg转成.ai格式导进去AE          3.使用AE的「从矢量图层创建形状」重新绘制     2. 使用「AEUX」插件

这仍然支持导出相对简单的图形。 但是，当遇到比较复杂的图形时，比如使用布尔运算绘制的图形，会出现一些奇怪的问题，比如缺少效果，所以你应该检查一下哪一种更适合你。 下面将提供插件下载链接和教程 URL。

:

• 剪切前请先将动画尺寸确定为@1x 尺寸。

由于是矢量动画，程序可以自动适应不同的模型。 因此，你需要养成一些设计习惯。 确定材质后，确定动画的尺寸@1x。

导出动画后

• 如何检查你的动画效果是否完美输出？

将动画导出为json文件后，可以将自己的json文件放在上面看看效果。 进入并下载客户端后，您可以直接扫码在手机上看到您的动画效果sketch怎么导出ai文件，超级方便！

给

:

• 提高动画通过率的技巧

你认为这个网站只能上传一个json文件吗？ 把包含图片和json文件的压缩包丢进去，就可以运行了。 但是，您可以在网站上看到这些图像文件，但扫描二维码后在客户端上将无法看到这些图像。 这种方式最适合交付给PM和老板时展示给他们看。 保真度越高，越容易提高通过率~

附加参考信息：

如有侵权请联系删除！