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

Posted 2023-03-10

【中文标题】在 App-Store 中构建卡片高亮动画

【英文标题】：Building Card-Highlighting-Animation as in the App-Store

【发布时间】：2017-10-26 09:28:47

【问题描述】：

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

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

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

此外，当您单击卡片时，它会变为全屏并带有动画。你有什么想法如何实现这个效果？

【参考方案1】：

关于刷卡缩卡，我也详细写过this。想法是这样的：

使用缩放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 个。然后为这些约束设置动画，使其充满屏幕。

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

注意：确切的 implementation detail 有点不同并且涉及到。

【讨论】：

非常感谢 Aunnnn。非常令人印象深刻，您最近的更新动画非常流畅。但是，当我使用详细屏幕中的表格视图移植到我的项目时，动画会出现故障，从左上角移到右上角。

【参考方案2】：

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

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

关于全屏动画，你想看看一些关于如何创建custom transition animations的教程。

【参考方案3】：

如果您对更完整的功能感兴趣，可以使用此库： https://github.com/PaoloCuscela/Cards

【参考方案4】：

当你按下卡片时，这也是一个很好的动画重建：

UIView.animate(withDuration: 0.5, delay: 0.0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.8, options: .beginFromCurrentState, animations: 
            self.transform = .init(scaleX: 0.95, y: 0.95)
, completion: nil)