ios UICollectionView 动画（插入/删除项目）

UICollectionView animations (insert/delete items)

提问by Sergey Katranuk

I'd like to customize the animation styles when a UICollectionViewCell is inserted and/or deleted.

我想在插入和/或删除 UICollectionViewCell 时自定义动画样式。

The reason why I need this is that by default I see that inserting a cell has a smooth fade in animation, however deleting a cell has a combination of move-to-the-left + fade out animation. I would be very happy with this if not for one problem.

我需要这个的原因是，默认情况下，我看到插入一个单元格具有平滑的淡入淡出动画，但是删除一个单元格具有向左移动 + 淡出动画的组合。如果不是因为一个问题，我会很高兴。

After I delete a cell, it is still reused when I add new ones, and when it's reused it's added not with the default fade in effect, but instead it's a combination of move-to-the-left + fade in.

当我删除一个单元格后，当我添加新单元格时它仍然会被重用，当它被重用时，它添加的不是默认的淡入效果，而是向左移动+淡入的组合。

I'm not sure why I'm getting this inconsistency in animations. If this is a known bug/problem/stupidity(on my side :)) please let me know how to fix it.

我不确定为什么我会在动画中出现这种不一致。如果这是一个已知的错误/问题/愚蠢（在我这边:)）请告诉我如何修复它。

Otherwise, let me know how to set custom animations when the cell is deleted (or point me towards a tutorial).

否则，让我知道如何在删除单元格时设置自定义动画（或指向我的教程）。

Thanks

谢谢

UPDATE

更新

Fixed the weird animation behavior by subclassing UICollectionViewFlowLayout and adding this line of code

通过继承 UICollectionViewFlowLayout 并添加这行代码修复了奇怪的动画行为

- (UICollectionViewLayoutAttributes *) initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath {

      return nil;
}

That's it! :)

就是这样！:)

回答by Guillaume

If you use your own subclass of UICollectionViewLayout, you can implement the methods:

如果您使用自己的 子类UICollectionViewLayout，则可以实现以下方法：

• initialLayoutAttributesForAppearingItemAtIndexPath:for insertions

• finalLayoutAttributesForDisappearingItemAtIndexPath:for deletions

• initialLayoutAttributesForAppearingItemAtIndexPath:用于插入

• finalLayoutAttributesForDisappearingItemAtIndexPath:删除

According to the documentation, the attributes you return are used as starting points for the animation, and the end point are the normal attributes returned by your layout (or the opposite for deletion). Layout attributes include position, alpha, transform... Of course, it is more work to write your own layout class than to use the Apple provided flow layout.

根据文档，您返回的属性用作动画的起点，结束点是您的布局返回的正常属性（或相反的删除）。布局属性包括位置、alpha、transform……当然，自己编写布局类比使用苹果提供的流布局要多一些工作。

Edit: To answer your question in the comments, here is a super basic implementation of a layout for rows of items which are all the same size.

编辑：要在评论中回答您的问题，这里是大小相同的多行项目布局的超级基本实现。

A cell has a frameand, by default, an alphaof 1.0 (as defined by layoutAttributesForItemAtIndexPath:). When it is deleted, its properties will be animated from its current state before the deletion to the properties set by finalLayoutAttributesForDisappearingItemAtIndexPath:, which correspond to the same frameand an alphaof 0.0. So it won't move but it will fade out. However, the cells to the right are going to be moved to the left (because their indexPathhas changed, and thus their frameas set by layoutAttributesForItemAtIndexPath:).

frame默认情况下，单元格的 a和 analpha为 1.0（由 定义layoutAttributesForItemAtIndexPath:）。当它被删除时，它的属性会从它删除前的当前状态动画到由 设置的属性finalLayoutAttributesForDisappearingItemAtIndexPath:，对应于相同frame和alpha0.0的属性。所以它不会移动，但它会淡出。但是，右侧的单元格将向左移动（因为它们indexPath已更改，因此它们的frame设置由layoutAttributesForItemAtIndexPath:）。

- (CGSize)collectionViewContentSize
{
    NSInteger numberOfItems = [self.collectionView numberOfItemsInSection:0];
    return CGSizeMake(numberOfItems * ITEM_WIDTH, ITEM_HEIGHT);
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSUInteger index = [indexPath indexAtPosition:0];
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attributes.frame = CGRectMake(index * ITEM_WIDTH, 0, ITEM_WIDTH, ITEM_HEIGHT);
    return attributes;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray *attributes = [NSMutableArray new];
    NSUInteger firstIndex = floorf(CGRectGetMinX(rect) / ITEM_WIDTH);
    NSUInteger lastIndex = ceilf(CGRectGetMaxX(rect) / ITEM_WIDTH);
    for (NSUInteger index = firstIndex; index <= lastIndex; index++) {
        NSIndexPath *indexPath = [[NSIndexPath alloc] initWithIndexes:(NSUInteger [2]){ 0, index } length:2];
        [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
    }
    return attributes;
}

- (UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
    attributes.alpha = 0.0;
    return attributes;
}

回答by Anil Varghese

Download the circle Layout. It is a sample custom layout that using

下载 圆形布局。这是一个示例自定义布局，使用

initialLayoutAttributesForAppearingItemAtIndexPath:  
finalLayoutAttributesForDisappearingItemAtIndexPath:  

That will be a good working material for you.

这对你来说将是一个很好的工作材料。