如何正确动画分页 UICollectionView 的大小变化

Posted 2023-03-13

【中文标题】如何正确动画分页 UICollectionView 的大小变化

【英文标题】：How to correctly animate change of size of a paged UICollectionView

【发布时间】：2018-03-14 11:19:38

【问题描述】：

我有一个类似于 iPad Keynote 的 iPad 应用程序，左侧是一个狭窄的概述，右侧是我的“幻灯片”的分页 UICollectionView。集合视图使用默认的 FlowLayout。其中一些幻灯片是标准 PDF 文件，一些嵌入了 UIViewControllers，这些幻灯片已被缩放（带有 CGAffineTransform）并嵌入到单元格中。我想在屏幕外平滑地为概览侧边栏设置动画并将当前页面单元格缩放到全屏。集合视图应该允许以任何大小进行分页滑动。我正在使用故事板和自动布局。

我认为我需要同时为三件事制作动画：

集合视图约束（到侧边栏）放大/缩小它 流布局的sizeForItemAt: 值 嵌入式视图控制器上的CGAffineTransform。

我有一些工作（单个嵌入式视图控制器“幻灯片”可以正确缩放）但无法让 collectionView/cell 调整大小的舞蹈正常工作。单元格调整大小动画不流畅，或者以错误的偏移结束，或者适用于最左边的单元格但不适用于其他单元格。

我已经尝试了this question 答案中的大部分建议，但没有令人信服的成功。我不敢相信这是不可能的，但此时我正在考虑为静态幻灯片制作动画并在动画完成后隐藏它的烟雾和镜子方法。随附的视频（忽略故障）说明了我所追求的效果：

值得注意的是，仔细检查后，Keynote 在编辑模式下的幻灯片之间滑动时有些作弊，并手动管理屏幕上的下一张幻灯片滑动，因此可能不使用UICollectionView。

有没有人做过类似的事情，或者对尝试的事情有什么建议？

【参考方案1】：

我设法解决了这个问题。有一个概念验证 GitHub 存储库here。

有几个活动部分：

UIView 缩放代码有两段。我怀疑这些可以与合适的委托引用相结合，因为嵌套的视图控制器是嵌入的。创建 Collection View 单元格时，第一部分（静态）正确缩放。第二个是更改侧边栏大小时的动画缩放/平移。

我添加了一个 FlowLayout 子类来消除闪烁，因为在缩放期间集合的布局无效。

*** VC 中与侧边栏相关的转换使用了书中的大部分技巧 - invalidateLayout()、performBatchUpdates(...)、layoutIfNeeded() 等，以及将 contentOffset 设置为正确的动画价值。需要手动跟踪正确的页面/幻灯片。

在开始调整大小时偶尔仍会出现轻微闪烁。这可能不是我的特定配色方案的问题，它是深灰色上的黑色。如果有人能建议如何追踪或缓解此问题，将获得奖励积分。