UICollectionView: анимация изменения размера ячейки при выборе

[UIView transitionWithView:collectionView 
                  duration:.5 
                   options:UIViewAnimationOptionTransitionCurlUp 
                animations:^{

    //any animatable attribute here.
    cell.frame = CGRectMake(3, 14, 100, 100);

} completion:^(BOOL finished) {

    //whatever you want to do upon completion

}];

Поэкспериментируйте с чем-то подобным внутри вашего метода didselectItemAtIndexPath.

С помощью Чейза Робертса я нашел решение своей проблемы. Мой код в основном выглядит так:

// Prepare for animation

[self.collectionView.collectionViewLayout invalidateLayout];
UICollectionViewCell *__weak cell = [self.collectionView cellForItemAtIndexPath:indexPath]; // Avoid retain cycles
void (^animateChangeWidth)() = ^()
{
    CGRect frame = cell.frame;
    frame.size = cell.intrinsicContentSize;
    cell.frame = frame;
};

// Animate

[UIView transitionWithView:cellToChangeSize duration:0.1f options: UIViewAnimationOptionCurveLinear animations:animateChangeWidth completion:nil];

Для дальнейшего объяснения:

1. Одним из наиболее важных шагов является вызов invalidateLayout на UICollectionView.collectionViewLayout, который вы используете. Если вы забудете об этом, вполне вероятно, что клетки вырастут за границы вашей коллекции — чего вы, скорее всего, не хотите. Также учтите, что ваш код должен в какой-то момент представить новый размер вашей ячейки в макете. В моем случае (я использую UICollectionViewFlowLayout) я скорректировал метод collectionView:layout:sizeForItemAtIndexPath, чтобы отразить новый размер измененной ячейки. Если забыть об этой части, с размерами ваших ячеек вообще ничего не произойдет, если вы сначала вызовете invalidateLayout, а затем попытаетесь анимировать изменение размера.

2. Самым странным (по крайней мере для меня), но важным является то, что вы вызываете invalidateLayout не внутри блока анимации. Если вы сделаете это, анимация будет отображаться не плавно, а с глюками и мерцанием.

3. Вы должны вызвать метод UIViews transitionWithView:duration:options:animations:completion: с ячейкой в ​​качестве аргумента для transitionWithView, а не всего представления коллекции, потому что это ячейка, которую вы хотите анимировать, а не вся коллекция.

4. Я использовал метод intrinsicContentSize моей ячейки, чтобы вернуть нужный размер — в моем случае я увеличиваю и уменьшаю ширину ячейки, чтобы отобразить кнопку или скрыть ее, в зависимости от состояния выбора ячейки.

Я надеюсь, что это поможет некоторым людям. Мне потребовалось несколько часов, чтобы понять, как заставить эту анимацию работать правильно, поэтому я стараюсь освободить других от этого трудоемкого бремени.

Анимация размера ячейки работает так же для представлений коллекций, как и для представлений таблиц. Если вы хотите анимировать размер ячейки, создайте модель данных, отражающую состояние ячейки (в моем случае я просто использую флаг (CollectionViewCellExpanded, CollectionViewCellCollapsed) и соответственно возвращаю CGSize.

При вызове и пустом вызове PerformBathUpdates представление автоматически анимируется.

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    [collectionView performBatchUpdates:^{
        // append your data model to return a larger size for
        // cell at this index path
    } completion:^(BOOL finished) {

    }];
}

Мне удалось анимировать изменения, используя -setCollectionViewLayout:animated: для создания нового экземпляра того же макета представления коллекции.

Например, если вы используете UICollectionViewFlowLayout, то:

// Make sure that your datasource/delegate are up-to-date first

// Then animate the layout changes
[collectionView setCollectionViewLayout:[[UICollectionViewFlowLayout alloc] init] animated:YES];

Это самое простое решение, которое я нашел - работает как шарм. Плавная анимация и не портит макет.

Быстрый

    collectionView.performBatchUpdates({}){}

Объект-C

    [collectionView performBatchUpdates:^{ } completion:^(BOOL finished) { }];

Блоки (замыкания в Swift) должны быть намеренно оставлены пустыми!

Хороший способ анимировать размер ячейки — переопределить isHighlighted в самом collectionViewCell.

class CollectionViewCell: UICollectionViewCell {

    override var isHighlighted: Bool {
        didSet {
            if isHighlighted {
                UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseOut, animations: {
                    self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
                }, completion: nil)
            } else {
                UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseOut, animations: {
                    self.transform = CGAffineTransform(scaleX: 1, y: 1)
                }, completion: nil)
            }
        }
    }

}

Использование PerformBatchUpdates не анимирует макет содержимого ячейки. Вместо этого вы можете использовать следующее:

    collectionView.collectionViewLayout.invalidateLayout()

    UIView.animate(
        withDuration: 0.4,
        delay: 0.0,
        usingSpringWithDamping: 1.0,
        initialSpringVelocity: 0.0,
        options: UIViewAnimationOptions(),
        animations: {
            self.collectionView.layoutIfNeeded()
        },
        completion: nil
    )

Это дает очень плавную анимацию.

Это похоже на ответ Игнатия Тремора, но анимация перехода у меня не работала должным образом.

Полное решение см. на странице https://github.com/cnoon/CollectionViewAnimations.

Это сработало для меня.

    collectionView.performBatchUpdates({ () -> Void in
        let ctx = UICollectionViewFlowLayoutInvalidationContext()
        ctx.invalidateFlowLayoutDelegateMetrics = true
        self.collectionView!.collectionViewLayout.invalidateLayoutWithContext(ctx)
    }) { (_: Bool) -> Void in
    }

class CollectionViewCell: UICollectionViewCell {
   override var isHighlighted: Bool {
       if isHighlighted {
            UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseInOut, animations: {
                self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
            }) { (bool) in
                UIView.animate(withDuration: 0.2, delay: 0, options: .curveEaseInOut, animations: {
                    self.transform = CGAffineTransform(scaleX: 1, y: 1)
                }, completion: nil)
            }
        }
   }
}

Нужно просто проверить, была ли изменена переменная isHighlighted на true, затем использовать анимацию UIView и анимировать обратно в обработчике завершения.