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

Question

这个伟大的ui guide显示了一些很酷的ui过渡。

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

我知道如何做好事。我也很成功（通过拍摄下一个viewcontroller的快照并在animateTransition(using transitionContext: UIViewControllerContextTransitioning)内展开）。

然而，我不知道伟大的人如何强烈推动双方的广告观点。

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

修改 我最终实现了Kubba的想法。

trungduc关于动画tableview单元格高度的想法有一些缺点。在转换之前和之后，单元位置不合适。此外，将viewcontroller帧的动画与tableview单元格高度同步证明是徒劳的。尽管如此，这可能是一个很好的解决方案，但可能会出现稍微不同的问题。

Project

Answer 1

我尝试这样的事情：

• 拍摄当前控制器的快照
• 从中提取两件：（1）从卡的顶部到屏幕的顶部，以及（2）从卡的底部到屏幕的底部
• 将它们放在应该
的地方
• 将（1）顶部和（2）移动到底部以及当前的转换

另一个想法，可能更容易提出：你可以在扩展卡的中间将快照分成两部分，但我不确定动画的行为方式

Answer 2

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

1. 点击单元格时，请保存tableView.contentOffset。
2. 将所选单元格的高度增加到屏幕高度。
3. 更新单元格高度，使用动画将单元格移动到屏幕顶部并按下过渡。
4. 当您想要返回时，减少所选单元格的高度，通过动画和转换的缓存值更改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];

抱歉，我不擅长斯威夫特;）

Answer 3

您可以使用基于Hero UIViewController的过渡动画  支持多种动画的图书馆。

整合非常简单，实现精美动画。

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