在从UITableView到UIView的交互式过渡中动画子视图 [英] Animating subviews in an interactive transition from the UITableView to a UIView

问题描述

对于仅支持iOS7的应用程序，我有一个UITableView（虽然如果有帮助的话可以将它更改为UICollectionView），其中单元格如下所示：

For an iOS7-only app, I have a UITableView (though it would be academic to change it to a UICollectionView if that will help) where the cells look like this:

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

我想转换到第二个视图，其中子视图缩小为更大，标签位置改变，更像是这样：

I want to transition to a second view, where the subview is zoomed out to be larger, and the label positions change, something more like this:

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

这类似于iOS7日历app，其中视图正在转换并在途中为部件设置动画。我知道我需要实现 UIViewControllerAnimatedTransitioning ，但我在概念上遇到类似这样的事情会有问题。我是否隐藏了单元格的子视图，用新视图的子视图替换它们但是在同一个地方，然后设置动画？还是有一种不太复杂的方式？任何示例代码都会受到赞赏，因为我发现的所有示例都没有从一个视图到另一个视图的子视图。

This is similar to the iOS7 Calendar app, where views are transitioning and animating the parts on the way. I know I'll need to implement UIViewControllerAnimatedTransitioning, but I'm conceptually having problems with how something like this would work. Do I hide the cell's subviews, replace them with the new view's subviews but in the same place, then animate those? Or is there a less convoluted way? Any sample code would be appreciated, as all of the examples I've found are not carrying subviews over from one view to the other.

ETA：我想的越多这个，我越想：用流式布局的UICollectionView更好地处理这个问题，并且只需要将细节设置为动画调整大小到屏幕的全尺寸吗？

ETA: The more I think about this, the more I wonder: is this better handled with a UICollectionView with a flow layout, and simply have the detail be an animated-in resizing of the cell to the full size of the screen?

推荐答案

我认为iOS7日历动画是用集合视图动画过渡布局完成的，这对于这种情况来说很棒但不太合适。此外，它们似乎让你在同一个视图控制器中，这可能不适合你在上面描述的主 - 细节场景。

The iOS7 calendar animations are, I think, done with collection view animated transition layouts, which are wonderful but not quite what you want for this situation. Also, they seem to keep you within the same view controller which may not be appropriate for a master-detail scenario as you describe above.

我一直在玩动画最近转换并发现iOS7中可用的新快照视图非常适合这类事情。

I've been playing with animated transitions recently and have found that the new snapshot views available in iOS7 are brilliant for this sort of thing.

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

I'm a huge fan of auto layout but transition animations using constraints are far too complicated. However, you can assume that at the start of a transition, your views are already laid out, so you can apply the following principles:

• 将传入视图添加到视图层次结构


• 在此基础上创建空白画布视图


• 创建传出视图的快照，将其添加到画布


• 创建传入视图的快照并将其添加到画布


• 在两者之间执行动画


• 删除画布

• Add the incoming view to your view hierarchy
• Create a blank canvas view on top of this
• Create a snapshot of your outgoing view (s) and add this to the canvas
• Create a snapshot of your incoming view (s) and add this to the canvas
• Perform the animations between the two
• Remove the canvas

因为布局已经发生，你可以使用 center 或 frame 这些快照上现有视图的属性，并为这些属性设置动画。它使代码更容易阅读。这就是Augie上面评论的内容。

Because the layout has already happened, you can use the center or frame properties of your existing views on these snapshots, and just animate those. It makes the code much easier to read. This is what Augie's comment above is getting at.

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

In your case, you can get the effect you are after by tying the various views of the selected cell to the views of the incoming controller, and animating them to their new positions.

我做了一个带有这种转换的示例项目，可以在GitHub上 。最终效果如下所示：

I've made an example project with this transition, available on GitHub. The final effect looks like this:

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

This is just a quick example to show how the animation could be performed. In production code, you'd probably make participating controllers conform to a protocol where they returned a number of views for use in transitioning rather than exposing the properties directly and tying the transition to those specific classes.

这篇关于在从UITableView到UIView的交互式过渡中动画子视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！