header_v0.7.0

【译】【原创】有了Lottie,设计师想要的AE动画开发人员都可以实现

123天前发布

原创文章 / 平面 / 教程
狐狸爱设计 原创,如需商业用途或转载请与狐狸爱设计联系,谢谢配合。

Lottie是由Airbnb团队开发开源动画工具。是一个基于安卓、iOS和本地app的库,能实时呈现AE动画效果,让本地app使用动画就像使用静态组件一样简单。


声明:如需转载,请申请本人授权并保留文章全部信息,严禁私自用于任何商业用途,请尊重作者权益。


过去,在安卓、iOS和React本地app上做复杂的动画是一个困难而漫长的过程。你要不就得为每个屏幕尺寸添加大量图片文件,要不就要写成千行难以维护的代码。

由于这个原因,大多数app都不适用动效——尽管动效是一个交流想法和创造引人注意的用户体验的强有力工具。一年前,我们打算改变这个现状。

现在,我们很高兴向你介绍我们的解决方案。Lottie是一个基于安卓、iOS和本地app的库,能实时呈现AE动画效果,让本地app使用动画就像使用静态组件一样简单。通过开源的AE插件—Bodymovin,把AE动画作为JSON文件导出,然后Lottie通过调用JSON文件使用动态数据。这个插件绑定了一个JS播放器,能在浏览器上演示动画。从2015年2月,Bodymovin的开发者——Hernan Torrisi,已经为添加功能和每月插件改进打下了稳固的基础。我们团队(iOS的Brandon Withrow, 安卓的Gabriel Peal, React本地app的Leland Richardson , 做体验设计的我)在Torrisi惊人创造的基础上开始了我们的改进。

b36458d24c76a801219c7777aaec.jpg


Lottie能让工程师建立更加丰富的动画,而不需要辛苦地大量重写。Nick Butcher的跳跃式动画,Bartek Lipinski的汉堡包菜单,以及Miroslaw Stanek的Twitter爱心,充分说明了从头开始创建一个动画是多么困难和耗时。有了Lottie,以挖掘框架为借鉴,猜测持续周期,手动创建Bézier曲线,重新创建动画,仅仅通过gif绘制动画作为参考已经过去。现在工程师能准确理解设计师想要的动画,准确地知道怎么实现出来。为了说明这一点,我们重新设计了他们的动画,给我们每个样本app提供了一个AE和JSON文件。

我们的目的是尽我们所能地支持更多的AE特性,以实现更多的动画效果,而不是简单的图标动画。我们创建了几个其他演示范例来展示这个库的灵活性、丰富性和深入的功能设置。在样本app里,为大量不同的动画提供了很多源文件,包括基本的线性动画,基于字符的动画,有多角度和切割的动态logo动画。

43fc58d24d1fa801219c770d5b93.jpg


我们已经开始在好几个不同分辨率的屏幕运行我们自己的Lottie动画了,包括app的通知、全屏的动效演示和我们的反馈流程。我们在以一种有趣有用的方式大大扩展我们的动画运用。

982458d24d43a801219c771f27d7.jpg


灵活而有效的解决方案


Airbnb是一个全球化的公司,为数以百万的顾客和房东服务,所以有一个灵活的动画形式在多个平台展示,对我们来说相当重要。有一个和Lottie相似的库,比如 Marcus Eckert的Squall 和Facebook的 Keyframes,但是我们的目标有点不同。Facebook只能支持一些简单的AE动效,因为他们主要专注在反馈上,但是我们想要尽可能地支持更多动效。至于Squall,Airbnb的设计师把它和Lottie结合起来使用,因为它有一个很了不起的AE预览app,这成了我们工作流程不可缺少的一部分。然而,它只支持iOS平台,我们的开发团队需要一个跨平台的解决方案。

Lottie也有一些其他特性被搭建在它的API里,这使得它更通用有效。Lottie支持通过网络下载JSON文件,这对A/B测试是很有用的。它也具备一个可选的缓存机制,被频繁使用的动效,比如许愿的心,每次都能下载一个缓存备份。Lottie动画可以通过使用动画进度特性的手势驱动,通过改变一个简单的值就可以控制动画的速度。iOS甚至支持运行时向动画中添加一个额外的本地UI,能被用于复杂的动画过渡。

除了所有的AE特性和我们已经做的API附件之外,目前,我们对未来还有很多想法。包括针对Lottie动画的地图视图,用Lottie实现的控制视图过渡,支持 Battle Axe的RubberHose、渐变、类型和图像。最难的地方就是下一步选择用哪些特性来处理。

18ef58d24d66a801219c77c78251.jpg


建立社区


将Lottie发布出来作为开源工具,不仅仅是把它给公众用,也是连接人们和创造社区的桥梁。当我们通过GitHub发布Lottie给设计师和工程师,我们也想和动画人连接起来。

我们受到了 9 Squares, Motion Corpse, 和 Animography这些社区的启发。这3个社区把全世界的人聚集到了一起,这些人从来都没有一起工作过,在一个公众动画项目中一起合作着。这些项目花了很多时间,需要各自团队的多次组织争论,但是毋庸置疑地是,总的来说给动画社区提供了巨大的价值。Motion Corpse和 Animography也公开分享了AE资源,在大家如何工作上给了很多领悟。

通过关注他们的合作领导,我们接触到了这3个团队,让他们为我们样本app的动画提供支持。我们已经包含了一个来自Motion Corpse团队的J.R. Canest创作的动画,是9 Squares项目中一个AI Boardman的广场,还有一个动画键盘使用了Animography的Mobilo动态字体,这个字体是20多个艺术家共同努力的成果。我们希望通过整合这些动画社区和工程师社区,会碰撞出不一样的火花。


很高兴听到你们使用Lottie——不管你是一个设计师,动画制作人或工程师,欢迎发邮件到lottie@airbnb.com分享你的观点、反馈和见解。我们很高兴能看到世界上社区开始使用lottie时,会以我们难以想象的方式做出些什么。


原文由Brandon Withrow,Gabriel Peal和Salih Abdul-Karim联合编写。

11

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功