3.0

当您阅读本章时，我假设您已经知道如何使用UITableView来显示数据。如果没有的话，回去看看《Swift book》的iOS 11编程入门

UITableView类提供了一种以表形式显示信息的强大方式，它是iOS应用程序中最常用的组件之一。无论你是在构建一个“应用程序”、“待办事项应用程序”还是“社交应用程序”，你都可以用一种或另一种形式来使用表格视图。UITableView的默认实现是初步的，只适用于基本的应用。为了将应用程序与其他应用程序区分开来，您通常为表视图和表单元格提供定制，以便使应用程序脱颖而出。

在本章中，我将向您展示一种强大的技术，通过添加微妙的动画来活跃您的应用程序。多亏了内置的api。对表视图单元格进行动画处理非常简单。同样，为了演示动画是如何完成的，我们将调整一个现有的基于表格的应用程序并添加一个微妙的动画。

首先，从这里下载项目模板。下载后，编译应用程序，确保你能正确运行它。它只是一个显示文章列表的非常简单的应用程序。

3.1

为表视图单元格创建一个简单的渐隐动画

让我们首先对基于表的应用程序进行调整，使其具有简单的渐隐效果。那么，当表行出现时，我们如何添加这个微妙的动画呢?  如果您查看UITableViewDelegate协议的文档，您应该找到一个名为tableView(_:willDisplay:forRowAt:)的方法:

optional func tableView(_ tableView: UITableView,

          willDisplay cell: UITableViewCell,

            forRowAt indexPath: IndexPath)

方法将在绘制行之前被调用。通过实现该方法，您可以自定义单元格对象，并在显示单元格之前添加您自己的动画。以下是创建渐隐效果所需的内容。在ArticleTableViewController.swift中插入代码片段:

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

    // Define the initial state (Before the animation)

    cell.alpha = 0

    // Define the final state (After the animation)

    UIView.animate(withDuration: 1.0, animations: { cell.alpha = 1 })

}

Core Animation为iOS开发人员提供了一种创建动画的简单方式。您需要做的就是定义可视化元素的初始和最终状态。Core Animation随后将找出这两种状态之间所需的动画。

在上面的代码中，我们首先将单元格的初始alpha值设置为0，这表示完全透明。然后我们开始动画;将持续时间设置为1秒，并定义单元格的最终状态，完全不透明。这将在表单元格出现时自动创建渐隐效果。

现在可以编译和运行应用程序了。

使用CATransform3D创建旋转效果

容易,对吧?只需几行代码，您的应用程序看起来就与基于表格的标准应用程序有点不同。tableView(_:willDisplay:forRowAt:)方法是实现表格视图单元格动画的关键。您可以在方法中实现任何类型的动画。

渐隐动画就是一个例子。现在让我们尝试使用CATransform3D实现另一个动画。别担心，你只需要几行代码。

若要将旋转效果添加到表单元格，请更新如下方法:

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

    // Define the initial state (Before the animation)

    let rotationAngleInRadians = 90.0 * CGFloat(Double.pi/180.0)

    let rotationTransform = CATransform3DMakeRotation(rotationAngleInRadians, 0, 0, 1)

    cell.layer.transform = rotationTransform

    // Define the final state (After the animation)

    UIView.animate(withDuration: 1.0, animations: { cell.layer.transform = CATransform3DIdentity })

}

与前面一样，我们定义转换的初始和最终状态。一般的想法是我们先顺时针旋转90度，然后把它恢复到正常的方向，也就是最终的状态。

好的，但是我们怎么能顺时针旋转90度的表格单元呢?

关键是使用CATransform3DMakeRotation函数来创建旋转变换。函数有四个参数:

弧度的角度——这是旋转的角度。由于角度是弧度，我们首先需要把角度转换成弧度。

        x轴-这是从屏幕左边到屏幕右边的轴。

        y轴——这是从屏幕顶部到屏幕底部的轴。

        z轴-这是指向屏幕外的轴"

由于旋转是围绕Z轴的，我们将这个参数的值设为1，而将X轴和Y轴的值设为0。一旦我们创建转换，它就被分配给单元格的层。

接下来，我们开始动画的持续时间为1秒。单元格的最终状态被设置为CATransform3DIdentity，它将把单元格重置为原始位置。

好了，点击运行来测试这个应用程序!

3.2

提示:你可能想知道CATransform3D是什么。它实际上是一个表示矩阵的结构。在三维空间中进行旋转等变换涉及到一些矩阵的计算。我不会讲矩阵计算的细节。如果你想了解更多，你可以查看这里.

用CATransform3DTranslate创建一个飞行的效果。

旋转效果看起来很酷吗?您可以进一步调整动画以使其更好。尝试更改tableView(_:willDisplay:forRowAt:)方法，并使用以下代码行替换rotationTransform的初始化:

let rotationTransform = CATransform3DTranslate(CATransform3DIdentity, -500, 100, 0)

代码行只是转换或移动单元格的位置。它表示单元格向左移动了500点(负值)，向下移动了100点(正值)。Z轴没有变化。

现在你可以再次测试这个应用了。点击“运行”按钮，就可以玩“飞行”了

3.3

现在，每当您在表格中滚动时，单元格动画都会显示出来，无论您是向下滚动还是向上滚动表格视图。”虽然动画很不错，但是如果动画显示得太频繁，用户会觉得很烦人。您可能只希望在单元格第一次出现时显示动画。尝试修改现有的项目并添加该限制。

总结

在本章中，我向您展示了表格单元动画的基础知识。尝试更改转换的值，看看会得到什么效果。

可以在这里查看原作者的项目.