使用Lottie在iOS应用中创建很棒的动画

如今，高质量的软件包含许多因素，例如：

在这个故事中，我想集中讨论最后一个因素，即可用性 。让我们从一个定义开始，什么是可用性？

可用性是指可以轻松有效地使用诸如软件和Web应用程序之类的产品来实现所需目标的程度。可用性评估使用用户界面所涉及的难度级别。（摘自Techopedia）

我坚信，良好的UI / UX是现代软件中必不可少的。无论您开发哪种软件，好的设计都有助于吸引用户，保持用户使用您的应用程序，使其与竞争对手区分开来。您要开发什么平台并不重要。无论是Web应用程序，移动应用程序还是桌面应用程序，都有太多的框架/库可帮助您创建出色的设计。

最近，我遇到了一个名为Lottie的图书馆。该库是由Airbnb开发的，其描述如下：

Lottie是一个iOS，Android和React Native库，可实时渲染After Effects动画，从而使应用程序可以像使用静态图像一样轻松地使用动画。（摘自Airbnb设计）

动画可以使您的软件设计更上一层楼。以下是有关UX中动画重要性的好几句：

当谈到出色的UX设计时，动画可以是多用途的。首先，它可以展示或推断功能。从某种意义上说，它起着小型随身携带的作用。另外，它可以增加一层乐趣和乐趣。它还可以为交互提供保证和意义。（摘自InVision）

Adobe After Effects（AE）是一款出色的软件，可帮助您构建令人难以置信的动画。为了在Lottie中使用AE动画，您应该安装AE的BodyMovin插件，该插件可将精美的动画转换为JSON格式。

您还可以在LottieFiles上找到现成的动画。对于本教程，我将使用在其中找到的漂亮动画：

现在，让我们使用Lottie并将上面的动画集成到iOS应用中。这应该花费您不到3分钟的时间！

椰子足

将Lottie依赖项添加到podfile：
pod 'lottie-ios'
然后跑
pod install

将Lottie依赖项添加到cartfile中：
github "airbnb/lottie-ios" "master"
然后跑
carthage update
接下来，在项目的常规设置中，将lottie-ios.framework文件添加到“链接的框架和库”设置。

3.通过拖放将动画JSON文件添加到包含项目文件的文件夹（包含ViewController ， Main.storyboard等的文件夹）中。选择以下选项：

4.在主视图中，添加一个将包含您的动画的视图（我将其制成300×300），并在身份检查器中添加类LOTAnimationView ：

5.将您的Animation View连接到ViewController （按Control键并将新创建的Animation View拖放到ViewController ）。

6. ViewController下行添加到ViewController的顶部：

  进口彩票

7.创建一个播放动画的功能：

  func playAnimation（）{animationView.setAnimation（named：“ loading”） 
  animationView.loopAnimation = true 
  animationView.play（）}

让我们遍历每一行代码：

  animationView.setAnimation（名称：“正在加载”）

其中“ loading”是动画JSON文件的名称。
这条线将动画与视图连接起来。

  animationView.loopAnimation = true

显然，这条线使动画循环播放，因此它总是动画。

  animationView.play（）

此功能基本上可以播放连接的动画。

8.在viewDidLoad()调用playAnimation() viewDidLoad() ：

  覆盖 func viewDidLoad（）{ super .viewDidLoad（） 
  playAnimation（）}

9.生成并运行该应用程序⚒

如您所见，感谢Lottie，将After Effects动画集成到iOS应用程序非常容易。只需三行调用Lottie的setAnimation ， loopAnimation和play的代码就可以play作用，并且在应用程序中可以播放漂亮的动画。

如果您喜欢本教程并想了解有关Lottie的更多信息，请查阅Lottie的文档。

我在本教程中创建的应用程序的GitHub存储库。