Lottie设计社区

什么是Lottie？

Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative，利用json文件的方式快速实现动画效果的库。能给实时绘制 After Effects 动画并且让原生 App 像使用静态素材一样使用这些动画。

简单来说，就是可以直接利用 AE 导出的 JSON 动画文件，将其解析为原生代码，并跨平台运行在设备上。

转自：知乎

作者：Salih Abdul-Karim、Gabriel Peal及Brandon Withrow

Salih Abdul-Karim是Airbnb的体验和动效设计师。

Gabriel Peal和Brandon Withrow是Airbnb的工程师。

去年我们发布Lottie时，并没有预料到这个工具会在设计界引发如此热烈的反响。Lottie帮助很多人解决了APP的动画问题，对此他们通过邮件，Twitter和GitHub向我们表达了兴奋之情。我们也看到了包括Nick Butcher、Valentina Berois、Chris Basha和Christopher Deane在内的众多设计师及工程师们写的文章。在他们的文章中，这些我们尊敬的业内人士详细叙述了Lottie给他们的动画设计过程带来的极大便利。

Google、Elevate、eero、《纽约时报》、Instacart、Uber、Walgreens、iHeartRadio等公司也和我们分享了他们的作品，他们使用Lottie的方式给了我们很大启发。设计界正围绕着Lottie不断进步，这也启发着我们和大家分享在开展新的开源项目过程中产生的想法，比如爱彼迎设计和The Noun Project以及John Caserta合作的“Modern Pictograms for Lottie”项目。但更重要的是，设计界也给了我们灵感，让我们深入思考应该如何搭建Lottie，和考虑它未来的成长和发展。

设计社区启发着我们不断改进

了解到各大平台上Lottie的使用情况后，我们开始思考如何改善某些功能。例如，有些公司用Lottie在APP运行的状态下，动态更新一些动画元素。比如说，《纽约时报》APP的导航栏Logo就使用了Lottie动画工具。以前《纽约时报》需要设计一白一黑两个单独的Logo，而使用了Lottie之后，用编程手段把Logo从黑色改成白色就行了。

Lottie的这种应用形式让我们开始思考：在App的运行状态下，我们还能如何提升Lottie更新动画图层的能力？除了更改颜色外，我们在拓展Lottie的功能，让它能在App运行状态下通过编程的方式改变任意图层的任意属性，比如笔划宽度、不透明度，放大缩小及位置等。这一改进将给大量产品的开发带来便利。举个例子，一个App如果需要调整原图的笔划粗细，使用Lottie，在App运行状态下就能从1px动态调整为2px，无需输出多个文件。

同时我们也在开发Lottie的其他特性，比如将多个动画串联起来。eero使用Lottie做了他们的wifi创建流程。他们做了多组动画，然后把它们串联成一个流畅的动画效果。在这个动画效果的一些节点上，某一段动画需要循环播放、直到某个动作完成，然后再进入下一组动画。虽然看起来这个过程好像是一个完整的动画，但实际上它是多个动画串联而成的。

之前，我们从未想过用这种方式串联动画，也没有想过可以这样做动画循环播放。这让我们开始思考 - 是不是可以简化这个流程？是不是可以循环播放某一小段动画？于是我们便开始研究，让Lottie可以逐帧播放，以及在一段大动画中循环播放某一小段动画。我们的终极目标是让Lottie串联动画变得更容易。

http://Lottiefiles.com让我们思索如何以更好的方式帮助人们获取动画的性能信息。毫无疑问，http://Lottiefiles.com开拓了我们的视野，让我们了解到了其他设计师手头的作品；我们能帮助其他人获取这些信息吗？这些思考促使我们增加了多种性能工具，创建了用于动画测试的Mac OS APP，并在示例APP上发布了二维码识别软件，用于测试Lottiefiles的动画。

打造知识共享中心

以上是三个例子，分享一下我们是如何被设计社区启发，根据Lottie的实际使用情况不断更新完善这个动画工具的。这些例子也发布在airbnb.io/lottie上，未来我们还会添加更多例子。这个网站汇集了各平台的所有知识和信息，还有大家需要的有关After Effects和Bodymovin的信息。在接下来的几个月中，我们将增加指南，教程和实际案例等内容，以建立面向所有用户的、内容丰富的知识共享中心。

期待您与我们分享

我们希望了解大家使用Lottie做了什么，以及开始使用Lottie前需要知道什么。除了探讨Lottie及其使用外，我们还想向设计社区征集实际案例中使用的资源和源文件。我们已经创建了用于回归测试的内部专用测试库，所以可以确保在为Lottie增加新功能时，不会中断各公司在APP上使用的旧版本动画。如果您正在使用Lottie，请通过lottie@airbnb.com与我们联系，欢迎给我们发送用于内部测试库的文件，以及用于向涉及社区展示的案例。

您使用Lottie是我们莫大的欣慰，我们非常期待见证设计界的各位用Lottie创造一个又一个惊艳的APP。