UICollectionViewCell 可以在点击时翻转并增大

Question

当我点击UICollectionViewCell时，如何使其翻转并放大以显示模态视图的动画效果?

- nicktones

Answer 1

这是我在另一个项目中使用过的内容，效果非常好：

- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    if (cell.selected) {
        [collectionView deselectItemAtIndexPath:indexPath animated:YES];
        [UIView transitionWithView:cell
                          duration:0.2
                           options:UIViewAnimationOptionTransitionFlipFromLeft
                        animations:^{
                            [cell setFrame:self.selectedCellDefaultFrame];
                            cell.transform = self.selectedCellDefaultTransform;
                        }
                        completion:^(BOOL finished) {
                            self.selectedCellDefaultFrame = CGRectZero;
                            [collectionView reloadItemsAtIndexPaths:@[indexPath]];
                        }];
        return NO;
    }
    else {
        return YES;
    }
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    [cell.superview bringSubviewToFront:cell];
    self.selectedCellDefaultFrame = cell.frame;
    self.selectedCellDefaultTransform = cell.transform;
    [UIView transitionWithView:cell
                      duration:0.2
                       options:UIViewAnimationOptionTransitionFlipFromRight
                    animations:^{
                        [cell setFrame:collectionView.bounds];
                        cell.transform = CGAffineTransformMakeRotation(0.0);
                    }
                    completion:^(BOOL finished) {}];
}

以下是需要翻译的内容：

这里有不同的事情：

• bringSubviewToFront:消息调用用于防止单元格在其他单元格后面动画展示
• 我们使用控制器中声明的两个属性：selectedCellDefaultFrame和selectedCellDefaultTransform来保存单元格的默认状态，并在取消选择时重新初始化它们
• 取消选择时，我们调用UICollectionView的reloadItemsAtIndexPaths:方法，以确保位置重置完全完成

如果您有任何问题，请告知我。

祝你好运！

- Zedenem

---

太棒了，感谢你的回答。当单元格翻转时，我如何选择要显示在其背面的视图？ - nicktones

看起来是个不错的解决方案。我在声明保存帧和变换属性时遇到了困难。我很难传递 CGRect 结构。你是如何声明它们的？ - Andrea Campolonghi

Answer 2

我还没有尝试过grow动画，但我认为我可以帮助您完成UICollectionViewCell翻转动画。

尝试以下操作：

UICollectionViewCell* cell = [collectionView cellForItemAtIndexPath:indexPath];

[UIView animateWithDuration:1.0
                      delay:0
                    options:(UIViewAnimationOptionAllowUserInteraction)
                 animations:^
                {
                     NSLog(@"starting animation");

                    [UIView transitionFromView:cell.contentView
                                        toView:newView
                                      duration:.5
                                       options:UIViewAnimationOptionTransitionFlipFromRight
                                    completion:nil];
                }
                 completion:^(BOOL finished)
                {
                     NSLog(@"animation end");
                }
 ];

希望这有所帮助！

- Janum Trivedi

---

谢谢。这将是一个很好的起点。当我整理完整个“翻转和增长”后，我会再发布回来！ - nicktones