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

Posted 2023-03-10

【中文标题】如何制作这个动画？即。连接共享元素

【英文标题】：How to make this animation? viz. Connect the shared element

【发布时间】：2018-03-16 09:03:10

【问题描述】：

有一个很棒的ui guide，它显示了一些很酷的 ui 转换。

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

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

但我不知道伟大的人是如何推动双方的相邻观点。

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

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

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

Project

【问题讨论】：

你为什么不去看看这个：github.com/Touchwonders/Transition

感谢您的链接。但它没有我要找的东西。

【参考方案1】：

我会尝试这样的：

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

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

【讨论】：

我会试试的。谢谢。

所以我最终实现了你的想法。我会在 24 小时后给你积分。

@Rishab 你能分享一下它的样子吗？

在github页面上。单击项目（编辑的最后一行）。

【参考方案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 ;)

【讨论】：

无需抱歉。这是您实施的一个技巧。真的很好，除了在我的项目中我需要去一个视图控制器。但这确实给了我一个新的角度。

看来你没有完全理解我的回答。我的答案是用来推送一个新的视图控制器。这就是为什么我总是说动画和过渡。我的意思是推动新的视图控制器转换，回来意味着关闭视图控制器。

据我了解，您的问题是关于在两侧推送相邻视图，并且您知道如何实现 animateTransition 方法来推送新的视图控制器。这就是为什么我的演示只显示动画在 tableView 上的工作方式。如果您需要我的帮助来完成它，请告诉我。但我认为有了我的指南，你可以自己实现它；）

我正在使用您给定的解决方案。这就是为什么我说我有一个新的角度。不过感谢您的澄清。

祝你好运。希望你完成后我能看到结果。

【参考方案3】：

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

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

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