自定义UIViewController转换 - 就像iOS 11的appstore app的今天选项卡一样

Question

创建自定义UIViewController过渡的最佳方法是什么VC,例如第一个有图像,当你点击它时,它会上升到屏幕的顶部,并添加一些其他UI组件(如标签和textViews)屏幕？

我希望实现Apple在App Store上新的"今天"标签上所做的事情:

知道最好的方法是什么？

谢谢 :)

Answer 1

我会与本地去UIViewControllerAnimatedTransitioning,UIPercentDrivenInteractiveTransition等方式,在那里你控制所有的动画/在过渡func animateTransition(using transitionContext: UIViewControllerContextTransitioning).

https://github.com/aunnnn/AppStoreiOS11InteractiveTransition

在动画期间隐藏目标视图和点击的单元格.创建一个与卡片单元格完全相同的新卡片内容视图,并将其用于动画.

对于动画,您可以通过设置AutoLayout约束动画使其看起来平滑(例如,在背景图像扩展时移动标签).将所有这些标签固定在卡片的角落周围,然后在设置卡片视图的宽度和高度限制时,它会在整个动画中保持不变.

制作contentMode背景图像视图.center以使其保持静止(首先调整大小).

对于内容(例如,文本视图)显示部分,您可以快照整个目标视图(隐藏它之前!),并将其添加到用于动画的卡片视图下方.再次,将内容快照的左侧,顶部,右侧固定到卡片视图,但使用固定高度锚点,以便内容显示在卡片下方.理想情况下,您应该有一个容器来存放卡和此快照.

对于模糊效果,在卡片下添加带有UIBlurEffect的UIVisualEffect,并将其alpha设置为动画.

现在cornerRadius是可动画的,所以很容易.设置动画卡片视图的cornerRadius以匹配原始单元格,将其设置为零.

在代码中有更多细节可以更好地解释:

https://github.com/aunnnn/AppStoreiOS11InteractiveTransition

此回购包括呈现动画和交互式解散部分.但它并不完全相同.

或者,如果你喜欢看看我的文章.

额外:弹跳向上动画

起初,我认为动画可以通过简单地动画卡片视图的边缘来填充窗口来完成UIView.animate(withDuration: delay: usingSpringWithDamping: initialSpringVelocity: options: animations:,但我错了.如果您只是在边缘使用弹簧动画,则动画与原始动画看起来不完全相同.

要使动画尽可能接近App Store的版本,您应该将垂直弹簧动画与卡片扩展动画分开.这意味着您将有一个特殊的容器视图animatingCardView再次保留.animatingCardView使用线性曲线为该容器内部的宽度和高度约束设置动画时,可以使用弹簧动画将整个容器垂直设置为目标.*

Answer 2

您上面显示的图片正在打开对话。您可以以相同的方式执行此操作，只需创建模态并在其中添加所有内容，如文本、标签、图像和十字按钮。点击图像打开此对话框