在tvOS上构建自定义UI动画，以获取我们的IBM SXSW认知啤酒品尝体验

3月的前几周，South by South West（SXSW）在奥斯丁很重要，而我们的实验室位于奥斯丁，对我们来说，参加音乐节并炫耀我们的精湛技能对我们很重要。有什么比使用IBM Watson强大功能根据用户的食物风味特征推荐本地奥斯丁精酿啤酒更好的方法了。

简而言之，该体验涉及询问用户他们最喜欢的食物是什么，Watson根据用户的食物风味特征推荐当地的奥斯汀啤酒，用户匿名进行味觉测试并给每个啤酒定级，然后向用户展示啤酒他们只是品尝。

以下是我们的经验：

这是一个正在运行的视频：

作为我们漂亮的用户界面的补充，我们构建了自定义动画，以将一个视图控制器的视图变形为另一个视图控制器，如以下动画所示：

让我们详细介绍如何构建UI和自定义动画。

建立使用者介面

我强烈支持通过使用UIView子类Swift文件使视图尽可能模块化，并尽可能使用xib文件构建视图的布局。此方法将情节提要中的视图与视图控制器视图分开。另外，使用xib文件可让您快速创建视图和子视图，而无需通过代码手动编写所有内容（这可能会很费时）。

让我们看一下我们品尝啤酒的画面之一：

上方是啤酒详细信息屏幕，我们在用户选择了自己喜欢的啤酒后向他们显示。乍一看，该视图看起来很复杂，但是如果将其分解为子视图，则可以简化复杂性。

在上方，您可以看到我们将该视图分为9个子视图。每个子视图都有一个关联的xib文件（如果适用）和一个UIView子类Swift文件。我坚信每种视图本身都应该能够做以下两件事：

有一个“ setupWithData”方法，该方法允许视图接收在视图中显示信息所需的数据。这种方法有助于将所有数据接收逻辑保持在一个地方。
知道如何获取接收到的数据以及如何按摩/准备将其显示在视图中。这可以包括设置字符串格式，设置视图的颜色等。

做到这两点，需要从视图控制器中提取大量代码，并使每个视图都具有极高的模块化性。对于上面显示的BeerDetailViewController，它需要做的就是创建每个子视图的实例，将每个子视图添加到其自己的视图，然后将数据传递给每个子视图。视图控制器不再需要担心格式化该数据或设置每个视图的各种UI属性，以使其看起来像其应有的样子—每个视图已经自行处理。

建立自定义动画

让我们再次看一下我在本文前面显示的动画。

首先，我们将从解释动画如何相对于完成动画时最终到达的视图控制器的工作开始。在这种情况下，这是BeerDetailViewController，如下所示：

还记得我们如何将这个视图分成9个子视图吗？这些视图中的每一个还负责了解如何在其中以及自己的子视图中设置动画。

动画单个视图

让我们专注于一个特定的子视图，特别是BreweryAndBeerNameView：

让我们来看看慢动作中该特定视图的动画：

由于我们仅针对tvOS进行构建，并且tvOS仅具有一个屏幕尺寸，因此我们具有能够使用框架并从自动布局中休息的优势。

首先，我在视图的xib文件上放置标签，然后在视图的UIView子类Swift文件中连接相应的插座：

以上是BreweryAndBeerNameView在其xib文件中的外观。以下是其UIView子类Swift文件，其子视图插座将xib文件子视图连接到UIView子类Swift文件。

ew 向下观看1张，还有8张。好消息是，构建和赋予每个视图动画的相同模式是完全相同的。

接下来，让我们接下来讨论如何使用视图控制器协调所有视图以一起进行动画处理。

协调所有视图以进行动画处理

包含所有这些视图的视图控制器（在本例中为“ BeerDetailViewController”）负责将其每个子视图帧设置为处于帧状态的预动画，然后告诉每个子视图进行动画。

要将子视图设置为处于帧状态的预动画状态，我们告诉每个子视图为动画准备其子视图。为此，我们调用每个子视图的prepareSubViewsForAnimation方法（我们在本文前面已经讨论过）：

到BeerDetailViewController ：

为此，我们首先创建一个BeerDetailViewController的新实例，并将该实例保存在RankViewViewController的属性之一中。然后，我们告诉BeerDetailViewController准备其子视图以进行动画处理。最后，我们将BeerDetailViewController的视图添加到RankViewViewController的视图中，将BeerDetailViewController的视图放置在RankViewViewControllers视图的顶部。请注意，由于BeerDetailViewController将所有子视图都准备好进行动画处理，因此用户将无法看到BeerDetailViewController的任何视图，因为其所有子视图都处于其动画前状态。

这样的整体动画并不是很难构建。但是，如果您要同时制作所有子视图，则肯定会非常耗时。最后，构建其中的一些动画使我们的啤酒品尝体验变得更加身临其境，并且让用户可以参与其中。我们在创建它们上花了很多时间！

如果您有任何疑问，请随时通过ajbuck@us.ibm.com给我发送电子邮件。