tvOS应用开发挑战：焦点效果和无限轮播

苹果公司的tvOS基于iOS 9，并使用许多相同的框架和技术，但是为苹果电视构建应用程序会遇到一些独特的挑战。 由于用户是在整个房间而不是在手掌之间与设备进行交互，因此要使之与Apple的本机tvOS应用程序一样引人入胜且令人身临其境，就需要开发人员和设计师进行创造性的思考。

在该平台上体验应用程序在很大程度上受到焦点引擎的影响，焦点引擎是UIKit中控制焦点和焦点移动的系统。 在为客户构建Apple TV应用程序时，我们在聚焦引擎方面遇到了两个主要挑战：聚焦效果和无限轮播。 我们还开发了一些创造性的解决方案。

焦点效果

我们的一位客户委托我们开发一款Apple TV应用，该应用以令人难忘的设计呈现独特的内容。 我们知道它需要充满活力和内在。 特别是，我们要确保所有交互元素都使用动画焦点效果。

Apple TV上的焦点效果类似于将鼠标指针悬停在网页上时发生的情况。 当您的拇指在Siri远程触摸板上滑动时，焦点将在电视屏幕周围缩放。

苹果内置应用程序中的焦点效果始终是交互式的。 轻轻地在触摸板上摇动手指，使聚焦的元素在周围摆动，就好像您直接接触它一样。 也有很酷的三维效果，有助于整体体验。

与iOS（您的手指直接在屏幕上轻敲）不同，tvOS使用焦点引擎作为手指在触摸板上位置的代理。 聚焦效果，尤其是交互式摆动动画，将您的眼睛吸引到聚焦的元素上，使应用程序更易于使用和更有趣。 考虑一下本机电影应用程序中的以下示例：

借助交互式动画，可以毫无误解地关注哪个电影海报。

挑战

我们的目标是在客户的应用程序中实现与Apple自己的应用程序相同或更好的焦点效果。 但是，当我们开始从事该项目时，我们遇到了一个大问题。

除了静态矩形图像，没有直接的方法可以向任意UI元素添加交互式焦点效果。 开箱即用，不支持其他类型的元素（圆形头像，文本框，按钮，嵌入式视频等）。

经过大量的研究和实验，我们意识到，再现苹果标准效果所需的所有原材料都已经存在。 我们只需要找到正确的食谱。

挑战是双重的。 首先，我们需要将Apple的所有焦点效果分解为基本元素，编写较小的代码块来重新创建每个代码。 其次，我们需要一种混合和匹配基本效果的方法，将它们组合成最适合每种特定类型的UI元素的分组。

解决方案

通过组合从iOS移植到tvOS的许多较旧的API并将它们包装在自定义框架中，我们构建了所需的工具，可为客户应用程序中的每个视图添加焦点效果。 我们甚至可以调整细微的方面，例如投影半径和最大倾斜角度，以达到完全适合客户设计目标的效果，而不是有限的内置选项的“一刀切”方法。

虽然我们无法向您展示客户的实际应用程序，但我们可以向您展示测试项目中的一些示例。 以下是“扁平化”视图层次结构的示例。 每个单元格都有一个圆角背景图像，一个大表情符号字符文本标签和一个标题标签。 所有这三个元素都正在一致地移动，就好像它们只是一个视图一样。

我们竭尽全力使焦点效果与Apple自己的效果完全匹配，因此用户立即就可以熟悉该应用程序。 只有受过训练的开发人员的眼睛才能看到创建这些效果所付出的隐藏额外努力。 这是我们如何创建具有多个视图的自定义视差效果的另一个示例。

每个单元格都有一个大文本标签，显示单个表情符号字符，并在其后面提供许多图像视图以创建隧道效果。 这些视图可能是任何东西：更多文本标签，嵌入式视频播放器，动画GIF。 我们的自定义框架允许我们组合所需的任何元素，独立控制每一层的视差效果。

有了这个自定义框架，我们就可以调整每个元素的详细信息，直到看起来完全符合客户希望的方式为止。 能够说“是的，我们可以做到”，而不是“对不起，那太难了”，这真的很不错。

无限轮播

另一个客户要求我们进行设计，该设计在其应用程序主屏幕顶部包括“无限轮播”。 一个示例就是Apple TV上“电影”应用顶部的轮播：

用户可以向右或向左滚动而不到达结尾。 内容会不断重复，直到您希望滚动为止。

苹果的旋转木马是很好的灵感来源，但我们希望客户得到更好的东西。 我们的设计目标包括：

• 允许用户沿转盘无限向右或向左移动焦点。
• 允许用户在动画“进行中”（尚未完成）时中断卡之间的滚动动画。 这使圆盘传送带感觉灵敏且触感佳。
• 具有正确定时的聚焦效果动画（随着聚焦或未聚焦而改变大小的项目）。 传统方法具有断断续续的越野车动画，揭示了轮播项目循环之间的“接缝”。 我们的动画应该总是流畅的。
• 一张专注于焦点的卡片，始终处于中心位置，并且动画流畅到位。 我们必须防止焦点引擎干扰此动画。

由于客户的轮播是新用户将在应用程序中进行交互的第一个也是最大的UI元素，因此其实现必须出色。

挑战

应该注意的是，无限轮播在iOS上并不是什么新鲜事物。 iPhone和iPad应用程序中有很多示例。 在引擎盖下，有许多不同的实现方法。

新的Apple TV运行tvOS，就像iOS的表亲一样。 乍一看，似乎我们可以重用一些可以在iOS上很好地为我们服务的代码。 但是，在开发开始后不久，我们遇到了一个巨大的挑战：在iOS上运行良好的策略都无法在tvOS上完美运行（或有时根本无法运行）。

在这种情况下，挑战集中在我们对焦点引擎的访问上。 与iPhone不同，iPhone的手指直接触摸玻璃，而Apple TV的手指在遥控器上。 操作系统扮演中间人，通过在屏幕上移动焦点来响应遥控器上的触摸。 焦点移动并不是开发人员可以严格控制的。 相反，开发人员在某种程度上依赖焦点引擎来遵循我们构建到应用程序中的提示。

解决方案

为了使我们的旋转木马无限滚动，我们必须为聚焦引擎提供正确的提示。 经过大量尝试和死胡同，直到我们找到最佳解决方案。

我们提出了一种将少数简单视图与Apple最新的工具之一结合在一起的方法：[UIStackView] [stack]。 通过自定义动画来模仿标准滚动动画，以及一些使项目无限循环的特殊逻辑，我们能够获得所需的确切体验。

这种方法确定了我们所有的设计目标。 我们很高兴能够为我们的客户为他们的应用提供最好的轮播。

当我们深入研究Apple TV的新项目时，我们将继续分享我们学到的东西。 下周请回来查看，我们将讨论更多有关构建更好的Apple TV应用程序的提示和技巧。