代码之家 › 专栏 › 技术社区 › Rishab

如何制作此动画?即:。连接共享元素

uianimation uiviewcontroller swift ios

2

Rishab · 技术社区 · 7 年前

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

我想知道如何做这个动画(伟大的一个)。

我知道怎么做好事。我也有一些成功的伟大的一个(通过拍摄下一个快照 viewcontroller 展示并在内部扩展 animateTransition(using transitionContext: UIViewControllerContextTransitioning) )。

但是我不知道这个推送这是双方的近景。

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

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

trungduc 的动画创意 tableview 单元格高度有一些缺点。转换前后单元格位置不正确。此外,同步的动画 视图控制器 具有tableview单元格高度的框架被证明是无效的。尽管如此,这是一个很好的解决方案,尽管可能是针对一个稍微不同的问题。

Project

3 回复 | 直到 7 年前

1

3

marc_s 3 年前

我想试试这样:

拍摄当前控制器的快照
从中提取两部分:(1)从卡的顶部到屏幕的顶部,(2)从卡的底部到屏幕的底部
把它们放在应该放的地方
随着当前的过渡,将(1)移到顶部,(2)移到底部

另一个可能更容易实现的想法是:您可以将快照分割在扩展卡中间的两块上,但我不确定动画会如何表现

2

trungduc é±æå 7 年前

我的解决方案非常简单,没有快照。

点击单元格时,保存 tableView.contentOffset 。
将选定单元格的高度增加到屏幕高度。
更新单元格高度,使用动画将单元格移动到屏幕顶部,并按下过渡。
如果要返回,请减小选定单元格的高度,更改 contentOffset 通过动画和过渡缓存值。

后果

enter link description here

我使用下面的代码为 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;)

3

1

Jaydeep Vora 7 年前

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

集成非常简单,可以实现漂亮的动画。

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