Lottie简介（翻译）

如下内容为原创，欢迎转载，转载请注明
来自每天博客：http://www.cnblogs.com/tiantianbyconan/p/6364634.html

Lottie简介（翻译）

原文：https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e#.mfnxbtt06

新的向本地apps的构建动画的开源工具。

做者：Brandon Withrow, Gabridl Peal, Leland Richardson 和 Salih AbdulKarim

在之前，在Android，iOS和React Native app上面构建复杂的动画是困难和冗长的过程。你要么不得不为每一个尺寸增长大量的图片文件，要么干脆编写数千行不可维护的代码。正由于如此，大多的apps并无使用动画——尽管这是一个交流想法和建立引人注目的用户体验的强大的工具。一年前，咱们就开始改变。

今天，咱们很高兴来介绍咱们的解决方案。Lottie是一个iOS，Android和React Native库，能够实时渲染After Effects动画，而且容许本地app像静态资源那样轻松地使用动画。Lottie使用名为Bodymovin的开源After Effects的扩展程序导出的JSON文件格式的动画数据。扩展程序与JavaScript player捆绑在一块儿，能够在web上渲染动画。自从2015年2月开始，Bodymovin的建立者，Hernan Torrisi经过每个月为插件添加和改进功能，打造了坚实的基础。咱们的团队（Brandon Withrow 在 iOS, Gabriel Peal 在 Android，Leland Richardson 在 React Native，和 我 在体验设计上）在Torrisi的非凡的工做之上开始咱们的旅程。

轻松地构建一个丰富的动画

Lottie容许工程师构建一个丰富的动画，而没有艰苦地重写它们的开销。Nick Butcher's的跳跃动画,Bartek Lipinski的汉堡菜单, 和Miroslaw Stanek 的Twitter爱心, 演示它们是多么困难和耗时，它能够用scratch重建动画。使用Lottie，挖掘参考框架，猜想持续时间，手动建立贝赛尔曲线，并从新制做只有一个GIF做为参考的动画将是过去了。如今工程师能够准确地实现设计者的意图，到底是怎么作的。为了证实它，咱们重建立了它们的动画，而后在咱们的每一个例子中提供了After Effects和JSON文件。

咱们的目标是尽量多地支持After Effects的特性，而不仅是简单的图标动画。咱们建立了一些其余例子来展现库的灵活性，丰富性和深刻的功能集。在例子app中，有用于各类不一样种类的动画的源文件，包括基本线条艺术，基于字符的动画，以及具备多个角度和切割的动态logo动画。

咱们已经开始在一些界面上使用咱们本身的Lottie动画，包括应用内通知，全帧动画插图和在咱们的审查流程中。咱们计划以一种有趣而有用的方式大大增长咱们对动画的使用。

灵活高效的解决方案

Airbnb是一个全球的公司，它支持数百万的顾客和主人，全部在多个平台上播放的灵活动画格式对咱们来讲是很是重要的。有一些与Lottie相似的库，如Marcus Eckert的Squall和Facebook的Keyframes,可是咱们的目标略有不一样。Facebook选择了一小部分After Effects的特性进行了支持，由于它们主要集中在响应，可是咱们想要尽量多地支持。至于Squall，Airbnb的设计师组合Lottie来使用它，由于它有一个惊艳的After Effects预览app，这使得它成为咱们工做流必要的一部分。然而，它只支持iOS，咱们的工程师团队须要一个跨平台的解决方案。

Lottie还在其API中内置了几个功能，使它更多样化和高效。它支持经过网络加载JSON文件，这在A/B测试是很是有用。它还有一个额外的缓存机制，因此频繁使用的动画，好比一个愿望清单的爱心，能够每次加载一个缓存的副本。Lottie动画能够经过使用动画进度功能的手势驱动，而且动画速度能够经过简单改变值来控制。iOS甚至支持在运行时增长额外的本地UI到一个动画中，这能够用于复杂的动画过渡。

除了咱们迄今为止的增长全部After Effects特性和API以外，咱们还有许多将来的想法。它们包括映射视图到Lottie动画中，使用Lottie控制视图过渡，支持Battle Axe 的 RubberHose，渐变，类型和图像的支持。最难的部分是下一个特性支持应该选择哪个。

构建社区

做为开源发布一些东西，并不仅是把它拿出来作为公共使用。它是一我的跟人之间链接和交流的桥梁。随着咱们更接近经过GitHub向设计师和工程师发布Lottie，咱们也想确保与动画人员进行链接。

咱们受到了建立的9 Squares，Motion Corpse和Animography的启发。全部这三个都汇集了来自世界各地的人，在公共动画项目上合做，他们可能永远不会一块儿工做。这些项目花费了几个月的工做和不少的组织，各自团队的争论，可是它们无疑对整个动画社区提供了巨大的价值。Motion Corpse 和 Animography 公开分享了After Effects的源文件，它们提供了大量人们怎么工做的深入的看法。

在他们的合做领导下，咱们接触了全部这三个团队，为咱们的示例app贡献了动画。咱们包括了一个来自 Motion Corpse J.R Canest 建立的动画，来自9 Squares 项目的 Al Boardman 的square之一，和一个使用Animography的Mobilo动画字体的键盘动画，其中有二十多个艺术家的工做。咱们但愿这些动画社区与强大的工程社区的合并将产生一些特别的东西。

从左到右：Motion Corpse 的 Jr.canest，来自 9 Squares 的 AI Boardman，Animography 的 Mobilo 字体动画

咱们想听到你怎么去使用Lottie——不论你是一个设计师，动画师，仍是工程师。请随时直接经过 lottie@airbnb.com 带着你的想法，反馈，看法与咱们联系。咱们很高兴看到当他们开始以咱们从未想象的方式使用Lottie时，世界各地的社区将会作些什么。

下载 Bodymovin，Lottie iOS，Android 和 React Native

最初发布于 airbnb.design/lottie/