复制谷歌搜索iOS卡片动画

Question

我目前正在尝试复制这个：

如果您熟悉Google的应用程序，它看起来像是一个带有自定义流布局的UICollectionView。

我正在扩展一个已经关闭并附加了一些额外代码的问题。

这里是另一个问题的链接。

在自定义流布局类中，通过设置负的最小行间距值并使用以下内容，我可以创建“堆叠”效果:

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *allAttributesInRect = [super layoutAttributesForElementsInRect:rect];

    CGPoint centerPoint = CGPointMake(CGRectGetMidX(self.collectionView.bounds), CGRectGetMidY(self.collectionView.bounds));

    for (UICollectionViewLayoutAttributes *cellAttributes in allAttributesInRect)
    {
        if (CGRectContainsPoint(cellAttributes.frame, centerPoint))
        {
            cellAttributes.transform = CGAffineTransformIdentity;
            cellAttributes.zIndex = 1.0;
        }
        else
        {
            cellAttributes.transform = CGAffineTransformMakeScale(0.75, 0.75);
        }
    }

    return allAttributesInRect;
}

删去动画效果已经可以了，但是我遇到了一些问题，在创建“堆叠”效果时，我只能将一个单元格拖到视图中，同时保持其余卡片堆叠在一起，就像上面所看到的。

- STANGMMX

---

嘿，我正在尝试复制相同的效果，但是没有太大的成功。我需要将卡片作为UICollectionView / UITableView的一部分，以便用户可以滚动更多的卡片，就像谷歌一样。但是我可以向您保证，谷歌构建该应用程序的方式不是使用集合视图。我已经在Reveal中检查了该应用程序，他们基本上只是使用视图来进行动画处理。尽管如此，我仍然需要一个colletionview，并且我唯一能想到的方法是拥有两个布局，您可以在其之间进行动画转换。这需要更多的时间。 - alex

提供一个所需效果的视频或gif图会帮助您获得答案。 - Segev

Answer 1

我看到这个视图有两个部分。1. 一堆“卡片”和2. 一张卡片堆的表格。这样分解使得处理起来更容易。

通过子类化UIView创建一个可以拖动的“卡片”（我称之为UICardView）应该很简单。创建这些“卡片”的“堆”也不应该太难。我认为最难的部分是高效地添加投影。

第二部分包含许多移动部件：将这些堆添加到表格中。实际上，表格用于平滑滚动和一致的间距，并且完全透明。您需要计算每个“卡片”堆的高度以进行heightForRowAtIndexPath:。

这种方法允许平滑滚动，相对较低的内存占用和相对容易的高度自定义。此外，这些较小的部件应该易于维护和添加功能。

- Fennelouski