在从 UITableView 到 UIView 的交互式过渡中动画子视图答案

【问题标题】：Animating subviews in an interactive transition from the UITableView to a UIView在从 UITableView 到 UIView 的交互式过渡中动画子视图
【发布时间】：2013-10-23 08:32:52
【问题描述】：

对于仅限 iOS7 的应用程序，我有一个 UITableView（如果有帮助的话，将其更改为 UICollectionView 会很学术），其中的单元格如下所示：

+----------------------------------+=======+
| Label1                           | sub-  |
| Label2     Label3                | view  |
+----------------------------------+=======+

我想过渡到第二个视图，其中子视图被缩小到更大，并且标签位置发生变化，更像这样：

          +----------+
          |          |
          | subview  |
          |          |
          +----------+
             Label1
             Label2
             Label3

这类似于 iOS7 日历应用程序，其中视图在途中转换和动画部件。我知道我需要实现UIViewControllerAnimatedTransitioning，但我在概念上遇到了这样的问题。我是否隐藏单元格的子视图，将它们替换为新视图的子视图但在同一个地方，然后为它们设置动画？还是有不那么复杂的方法？任何示例代码都将不胜感激，因为我发现的所有示例都没有将子视图从一个视图转移到另一个视图。

ETA：我想得越多，我就越想知道：这是否可以通过带有流布局的 UICollectionView 更好地处理，并且只需将细节设置为将单元格调整为屏幕的完整大小的动画?

【问题讨论】：

你的意思是你在视图控制器之间移动？
是的。我正在使用 UINavigationController。点击 UITableView 中的单元格会将详细的 UIViewController 推送到堆栈上，我想使用 iOS7 中的新动画过渡来做到这一点。
我今天一直在搞同样的事情。到目前为止我发现的唯一的东西，我不喜欢它，因为它感觉很hackish，是在我的 UIViewControllerAnimatedTransitioning 协议类中导入我的目标类，将 subivew 属性公开，然后在 animateTransition: 中调整它们的帧/比例.它有效，但我不喜欢将其作为解决方案。
是的，我目前在想，我基本上会在 detailview 上复制单元格中的视图，在过渡时，隐藏单元格视图并显示 detailview 视图，背景透明，然后在我将详细视图视图设置为动画时淡入背景，而不是在控制器之间实际共享视图。
我已经放弃了不断变化的矩形、自动布局和约束，因为这些会导致头疼。 CGaffinetransforms 产生了更好的结果，但仍然不是很好。想着做快照，把快照拼接成多张快照，每一张都进行变换。

标签： ios ios7 transitions

【解决方案1】：

我认为，iOS7 的日历动画是通过集合视图动画过渡布局完成的，这非常棒，但在这种情况下并不是你想要的。此外，它们似乎将您保留在同一个视图控制器中，这可能不适合您上面描述的主从场景。

我最近一直在玩动画过渡，发现 iOS7 中可用的新快照视图非常适合这种事情。

我是自动布局的忠实粉丝，但使用约束的过渡动画太复杂了。但是，您可以假设在过渡开始时，您的视图已经布局，因此您可以应用以下原则：

将传入视图添加到视图层次结构中
在此之上创建一个空白画布视图
创建传出视图的快照并将其添加到画布中
创建传入视图的快照并将其添加到画布中
在两者之间执行动画
移除画布

由于布局已经发生，您可以在这些快照上使用现有视图的center 或frame 属性，并为它们设置动画。它使代码更容易阅读。这就是奥吉上面的评论所要表达的。

在您的情况下，您可以通过将所选单元格的各种视图与传入控制器的视图绑定，并将它们动画到新位置来获得您想要的效果。

我已经制作了一个带有此转换的示例项目，可通过on GitHub 获取。最终效果如下：

这只是一个演示如何执行动画的简单示例。在生产代码中，您可能会让参与的控制器符合一个协议，在该协议中它们返回许多视图以用于转换，而不是直接公开属性并将转换绑定到那些特定的类。

【讨论】：

谢谢！这是一个非常有趣的技术。我不确定我是否完全理解发生了什么，但我期待着深入研究并弄清楚。
如果有您不遵循的特定部分，很高兴添加更多详细信息。请告诉我。
@jrturton 这非常棒，但我想问一下这是否仍然是一个有效的实现以及快照是否有效？我很好奇为什么你不能直接为标签设置动画？另一个问题是，如果您只有图像移动到位，然后是其他新元素，那么淡入它们是否有意义？也许只是淡出画布背景颜色？我正在尝试在 Android 中复制 Material Design 过渡。
@user1416564 是的，这仍然有效，是的，快照提供了良好的性能。动画标签直接与自动布局发生冲突，并使参与的视图控制器的视图全部混乱。画布视图上的快照除了删除画布视图外，无需进行任何清理。
@jrturton 我成功地使用您的 git hub 项目实现了这一点，但是在 convertToRect 方法工作时遇到了一些问题，并且还试图找出一种方法让它为生产做好准备。