15321250321
010-86462584

APP开发 > APP学院 > APP设计

APP开发中的 Lottie 和动画

2022-07-07

​现代的APP开发喜欢动画。无论是动画标志;按钮推动的一些微妙补充;或者实现我们所说的微交互。他们正在成为让APP“感觉”更优质的首要方式之一,就好像它来自 Airbnb、Netflix 或 Google 之类的公司一样。直到最近才出现这种情况,因为开发它们可能会变得非常昂贵。聘请动画师与前端开发人员长期合作以完善APP的一小部分似乎对于许多项目来说并不值得。

由于动画已经越来越深入地嵌入到APP空间中,各种组织已经推出了库来支持开发人员更快地创建这些,并且在设计师/动画师端也发生了同样的情况。Airbnb 的 Lottie 就是这样一个图书馆。它的创建是为了让设计人员能够向开发人员提供一段创建完整动画的 javascript。您可以将标记附加到它,以便它们可以循环、反转、基于某些交互进行更改以及各种操作。最重要的是,它可以与我们最喜欢的开发框架 React Native 一起使用,所以我们喜欢它。考虑到这个库和其他库,较小的项目和机构可以慢慢使用动画。

以下是我们最近一直在考虑向我们的APP添加动画的几种方法:

Spring

由于 Lottie 使用名为 Adobe After Effects 的程序来工作,因此您可以通过播放一些关键帧速度来将所谓的“弹簧”缓动添加到动画中。Spring 为动画添加了额外的反弹,这有助于使一切感觉自然,就好像您的APP融入了现实世界中发生的动作一样。你可以在这里看到不同之处,我们有一个动画,它有一种称为“捕捉”的弹簧缓动,而一个没有。 

微交互

微交互已成为现代APP的重要组成部分。对于额外的努力,他们可以让用户对APP感到宾至如归。他们可以看到屏幕上的元素在导航时快速流畅地响应它们。微交互还允许用户享受小时刻和点缀在APP中的复活节彩蛋。这些可以小到为一些图标设置动画,为按钮点击添加一些闪光,或者添加一些动画吐司提示以向用户展示。我个人最喜欢的是在名为Divi的 WordPress 主题中使用的颜色选择器动画,我在这里模拟了一个类似的版本。

全屏过渡

我们在这里一直在尝试使用lottie 来创建和/或协助自定义全屏转换的能力。这些变得有点复杂,可能需要更多的工作,但它们可以让你的APP看起来更有趣;尤其是在进行涉及在后台发送或加载额外内容的较大转换时。在这张照片中,我们演示了将其用于登录屏幕。

加载屏幕

Lottie 最常见的用途之一是创建有趣、有弹性的加载屏幕。这些为用户提供了反馈和一些很酷的东西,让他们在后台等待一切发生。APP完成加载后,您甚至可以将其拼接成全屏过渡或完成弹出。

为演练、零状态和错误屏幕添加天赋

将 Lottie 动画添加到APP的演练屏幕有助于用户的教育过程。一次显示一个动画元素可以帮助用户阅读内容。动画零状态屏幕可能会产生类似的影响,因为您可以指导用户快速解决问题的方法。

投入生产

尽管创建与上述类似的动画很有趣,但 Lottie 所能提供的帮助有限。开发仍然需要为这里显示的几乎所有动画形成主干。屏幕之间的转换仍然需要大量的人工操作;Lottie 只是让这个过程稍微容易一些。Lottie 动画可以为许多小型微交互提供动力,但是一旦添加了稍微复杂一点的功能,使用 Lottie 几乎不可能创建微交互。

下一步是什么?

在展望APP开发中动画的未来时,它肯定看起来很光明。Apple 最近推出的 SwiftUI、React Native 的 MagicMove 等库以及领先组织的持续支持正在慢慢弥合设计和开发之间的差距。UI 设计师现在可以开始制作复杂动画APP交互的原型,然后将代码交给开发人员进行简单粘贴。同样,开发人员可以激活库来为他们做越来越多的漂亮动画工作。

客服QQ:121446412 联系电话:15321250321

京ICP备17026149号-1

版权所有@2011-2022 北京天品互联科技有限公司 公司地址:北京市海淀区上地南路科贸大厦408

收缩
  • 15321250321