关于Facebook的开源项目Keyframes

"Keyframes - Delivering scalable, high-quality animations to mobile clients." --这是Facebook官方的大标题。这里是官方介绍文章: 点击打开链接

keyframes这个库(以下简称KF)就是先用Adobe AE制作动画(制作动画时需遵循fb的几个限制，后文会介绍到)，然后通过Facebook提供的AE脚本插件将动画导出为json数据格式，这个json就是动画的描述信息，最后通过KF的Android和iOS库将json动画展示到我们的APP里。

看一下这个动画效果，这是Facebook目前APP上的一个点赞表情：

很生动活泼吧，这个就是用KF实现的。关于在APP内使用KF展示我们用AE做好并导出的SVG图很简单，请查阅KF的官方文档的github项目地址以及项目中的demo，用法很简单。

在我开始尝试使用KF时，我用AE制作了一个简单的loading动画，然后用KF提供的AE插件导出了json文本。遇到的第一个问题是用AE制作的简单动画并不能在APP中画出来，效果是什么都没有。这是我在AE中做的动画：

前文提到如果要使用KF绘制动画，在用AE制作动画时需遵循一些限制，在我仔细阅读了官方文档后，注意到官方文档中有一句:

• Only use interpolate type ‘LINEAR’ and ‘BEZIER’ on your keyframes

于是这么做：在内容->元素->路径（灰色选中行）上右键点击->转换为贝塞尔曲线路径，将每一个图层的路径都改为贝塞尔曲线路径，这样就解决了我遇到的问题。

当然fb官方文档里还列出了一些AE做动画时的限制条件，随着我们动画的需求的增加，动画会更复杂，这个时候可能就会面临这些限制条件。在我做的简单的loading动画中暂时只遇到了这一个问题。以下是我写的AE小动画：

点击打开链接

附：

我最初尝试使用了Keyframes，不过不久后又发现airbnb的开源项目Lottie :  Lottie介绍。Lottie是直接使用bodymovin转换的json文件，不像Keyframes是在这个基础上又抽取了它需要的元素，Keyframes也因此大大降低了json文件大小。不过相应的，Keyframes支持的AE特性就少了很多。Lottie的目标是“支持尽可能多的AE特性”，因此在我们用AE作图时，Lottie并没有做多少限制。因此，Lottie和Keframes各有利弊——如果你想实现更复杂的动画，并且不希望被限制使用AE的各种特性，则建议使用Lottie；如果你要实现的AE动画不需要复杂的AE特性，并且希望精简json文件大小的话，建议使用Keyframes。