如何制作这个动画？即。连接共享元素

Question

这个很棒的 ui guide 展示了一些很酷的 ui 转换。

我想知道如何制作这个动画（很棒的动画）。

我知道如何做好事。我也取得了一些成功（通过拍摄下一个 viewcontroller 的快照并将其扩展到 animateTransition(using transitionContext: UIViewControllerContextTransitioning) 中）。

不过不知大佬如何推两边都是邻接的观点

我想知道如何做到这一点（推出）。我不需要代码。一般guide就可以了

编辑： 我最终实现了的想法。

对 tableview 单元格高度进行动画处理的想法有一些缺点。转换前后单元格位置不正确。此外，将 viewcontroller 帧的动画与 tableview 单元格高度同步被证明是徒劳的。尽管如此，它仍然是一个很好的解决方案，尽管可能是针对稍微不同的问题。

Project

Answer 1

我会尝试这样的事情：

拍摄当前控制器的快照
从中提取两部分：(1) 从卡片顶部到屏幕顶部和 (2) 从卡片底部到屏幕底部
把它们放在它们应该在的地方
将 (1) 移动到顶部，将 (2) 移动到底部以及您当前的过渡

另一个想法，可能更容易实现：你可以在扩展卡中间将快照分成两部分，但我不确定动画会如何表现

Answer 2

我的解决方案很简单，没有快照。

点击单元格时，保存 tableView.contentOffset。
将所选单元格的高度增加到屏幕高度。
更新单元格高度，使用动画将单元格移动到屏幕顶部并推动过渡。
当你想回来时，降低所选单元格的高度，通过动画和过渡改变缓存值contentOffset。

结果。

我使用下面的代码为 tableView 制作动画，将其放在 didSelectRowAtIndexPath 方法中。

[UIView beginAnimations:@"animation" context:nil];
[UIView setAnimationDuration:4.f];
[CATransaction begin];
[tableView beginUpdates];
[tableView endUpdates];
[tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
[CATransaction commit];
[UIView commitAnimations];

抱歉我不擅长 Swift ;)

Answer 3

您可以使用基于Hero UIViewController 的过渡动画支持多种类型动画的库。

集成很简单，实现漂亮的动画。

您可以使用下面的示例屏幕截图，它是使用 Hero 创建的。

如何制作这个动画？即。连接共享元素

How to make this animation? viz. Connect the shared element

ios

swift

uiviewcontroller

uianimation