什么是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。
领取专属 10元无门槛券
私享最新 技术干货