在表格视图单元格上创建流畅多彩的缩放过渡

动画很棒。 iOS用户喜欢使用具有沉浸感和流畅动画的出色应用程序。 这是我作为该平台上的iOS开发人员的第一篇文章，我想向您解释我对当前正在从事的项目的认识。

想象一下这样的对象列表，或者更好的是UITableView ：

简单，清晰，并且对本教程来说最重要的是单色单元。 如果通过点击这些单元格之一来扩展它并转到具有相同颜色背景的另一个视图控制器，那将不是很好吗？ 我真的是这样 在本教程中，您将实现它。

---

因此，让我们打开一个新的Xcode项目并开始编码

让我们从创建带有交替彩色单元格的UITableView开始，我将选择红色和蓝色。 在您的项目中打开ViewController.swift并添加此方法。

如您所见，我将代码放入ViewController.swift的私有函数中，并且由于设置了委托和数据源，因此编写了扩展程序来处理所需的方法。

我在viewDidLoad（）中调用setupTableView （）。 这是您在运行项目时看到的：

这是UITableView的非常简单的实现。 但是我不喜欢那些颜色，那些分隔物和那些大的单元格。 我开始以这种方式删除分隔符：

  tableView.separatorStyle = .none 

然后，我认为我们应该为单元格添加一个单独的类。 一切都会变得更加复杂。 转到“ 项目导航器”，“新文件”，“可可接触类” 。 输入“ ColorfulTableViewCell”并使其成为UITableViewCell的子类。 创建文件。 现在，您应该拥有以下内容：

我们希望我们的单元格像我在故事开始时所展示的那样。 我们需要卡片视图样式。 我在类中声明了一个var并创建了图形：

看一下setupGraphic（）的前两行。 我需要一个清晰的背景，因为我想使用一个漂亮的卡片视图，并且我还需要一个.none selectionStyle，因为我不需要它。 确保您的ColorfulTableViewCell类是这样的，然后再次打开ViewController.swift进行一些小的更改。 在setupTableView（）中，您必须为单元格注册另一个类。 不再是UITableViewCell.classForCoder（），而是新的UITableViewCell.classForCoder（）。

  tableView.register（ColorfulTableViewCell.classForCoder（），reuseIdentifier：“ ColorfulCell”） 

像这样编辑numberOfRows和cellForRow ：

现在，我们要使用自定义单元格类，我们将使用其中的五个。 现在您可以再次运行，您应该可以看到以下内容：

让我们添加一些很酷的颜色。 我建议您在coolors.co上找到这5个。 这是一个很棒的免费网站，可让您生成随机的颜色组合。

让我们获取RGB并将其添加到代码中。 现在，在ViewController.swift中，我们必须创建一个数组（我称其为“ coolColors”），以包装这些颜色并在cellForRow（）中轻松使用它们。

一旦使用它们并运行，您应该会看到以下内容：

现在，我们有了丰富多彩的“ cardy”表视图💕。 让我们让事情变得更有趣。 当您点击一个单元格时，我们需要一种缩放效果并过渡到视图控制器。 那么，当我说“ 轻按一个单元格 ”时，您会怎么想？

让我们在didSelectRow中写一些东西。

在这种情况下，我们要缩放卡片以具有良好的过渡效果 。 如何获得单卡？ 我们可以简单地在表视图上重新创建它 ，然后使用它。

这就是我简单地重新创建轻敲单元的卡片视图的方式：

现在点击一个单元格似乎没有任何反应，但是如果您对屏幕进行3D调试，您应该看到以下内容：

我轻按了最后三个单元，如您所见，它们上面有一张卡片。

现在… 让我们动起来😱

跑。 您应该对刚刚创建的内容感到惊讶🤩。

在继续之前，我们先保存一下。 我们需要cardViewFrame和copyOfCardView的参考。 当我们从第二个视图控制器返回时，我们将不得不调整大小，然后删除copyOfCardView 。

我为此做了一些结构 ，并以此方式使用：

让我们创建另一个VC并进入它。 项目导航器，New File，Cocoa Touch Class，然后键入UIViewController的子类“ SecondViewController ”。

让我们这样设置：

现在，让我们在ViewController.swift中添加一个私有函数，如下所示：

我再次修改了didSelectRow，所以这是更新的版本：

跑！ 太神奇了吗？ 我们制作了一个简单但很酷的动画。 这是有限的，因为我们使用了现有的视图控制器，但是对于许多用例来说，这是一个非常好的方法，我相信😊。

现在，我想您想回到彩色表格视图！

让我们为SecondViewController.swift添加一个接口，并在主视图上添加一个简单的轻击手势，以使某些可以轻击的东西可以模拟一个按钮或您在vc中可以拥有的其他东西。

这就是我编辑SecondViewController.swift的方式。 查看顶部的协议 。 在viewDidLoad（）中，您可以找到轻击手势，并在goBackToTapGestureAction（）的实现下方找到它。

让我们回到ViewController.swift并实现协议。

我在goToNextViewController（）中将委托分配给ViewController.swift ，并添加了didGoBack（）的实现。

做完了！ 我们在iOS中提供了一个完全正常且不错的缩放过渡。 你不兴奋吗？ 🤩

让我们看看😻

我真的希望您喜欢本教程，并希望您找到实现该目标的正确用例。 我知道这不是用Swift实现这样的复杂转换的正确方法：我确实绕过了UIViewControllerTransitioningDelegate ，但是对于一个简单的用例，我认为这可能是一个很好的解决方案。 显然，您可以向每张卡添加所需的内容 ，可以与其中的对象一起玩，以使其消失或褪色，或者进行其他操作，以创建更酷的动画方式。

在Twitter上关注我@ edoardovicoli😊