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

Question

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

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

有没有更简单的方法来缩小 View 及其所有 subview ？

此外，当您单击卡片时，它会增加到全屏并带有动画。您知道如何实现这种效果吗？

Answer 1

关于攻丝缩卡，我也写过this详细地。这是想法:

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

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

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

---

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

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

一切都完成后，隐藏该虚拟 View 并显示目标详细信息页面。

注意:确切的 implementation detail有点不同和参与。