在 App-Store 中构建卡片高亮动画

Question

在 AppStore (iOS 11) 左侧的“今天”选项卡中，有几个卡片视图。如果你突出显示一个，它会缩小一点。我怎样才能重建这个动画？

我想在动画期间更改卡片视图的约束不是我们所需要的，因为您还必须调整所有其他约束（例如标签的）以匹配新尺寸。

有没有更简单的方法来缩小视图及其所有子视图？

此外，当您单击卡片时，它会随着动画增加到全屏。你有什么想法如何实现这种效果吗？

Answer 1

对于攻和收缩卡，我也写了一篇关于这个的细节。这是想法：

• 使用缩放transform来动画缩小（就像在接受的答案中一样）
• 禁用delaysContentTouch以使其在触摸时收缩得更快 ( scrollView.delaysContentTouch = false)
• 始终允许用户使用.allowUserInteraction动画选项滚动：

UIView.animate(withDuration: 1.0,
               delay: 0.0,
               options: [.allowUserInteraction],
               animations: ...,
               completion: ...)

（默认情况下，当您使用 时transform，它会稍微禁用交互。如果不这样做，用户将无法连续滚动）

关于使用动画扩展到全屏，我尝试使用本机的过渡 API 复制它，您可以在此处查看：https : //github.com/aunnnn/AppStoreiOS11InteractiveTransition

总之，我UIViewControllerAnimatedTransitioning用来做自定义动画。隐藏原卡并为动画创建一个新的虚拟卡视图。然后设置该卡的 AutoLayout 约束，包括 4 个到每个屏幕边缘。然后为这些约束设置动画以使其填满屏幕。

一切完成后，隐藏该虚拟视图并显示目的地详细信息页面。

注意：确切的实现细节有点不同并且涉及到。

Answer 2

您可以使用以下命令获得简单的缩放动画transform：

UIView.animate(withDuration: 0.2) {
    view.transform = CGAffineTransform.identity.scaledBy(x: 0.9, y: 0.9)
}

至于全屏动画，您想查看一些有关如何创建自定义过渡动画的教程。