在“ didSelectItemAt”上放大UICollectionViewCell。 [英] Zoom in UICollectionViewCell on "didSelectItemAt"

问题描述

我需要实现一个类似于附件gif的动画。

I need to implement an animation which looks like the attached gif.

当您点击一个单元格时，它应该放大并相应地保持单元格之间的间距（单元格不应重叠）。当您选择另一个单元格时，当前选定的单元格会以原始大小设置动画，并且新选择的单元格会同时缩放。

When you tap on a cell, it should zoom in and accordingly the spacing between cells should maintain(Cell shouldn't overlap).When you select another cell the currently selected cell animate to original size and the newly selected cell zoom in the same time.

当前，在当用户选择我要为UICollectionView重新加载的单元格，并且在 cellForItemAtIndex 中，我使用 CGAffineTransform.scale保留了一些动画图像的时间。

Currently, in when the user selects the cell I'm calling reload for UICollectionView and in cellForItemAtIndex I have kept some delay to animate the image using "CGAffineTransform.scale".

但是用这种方法，我没有得到想要的动画，但是有明显的闪烁。

But with this approach I'm not getting the desired animation, there is a noticeable flickering.

func animateTheCellOnTapping(cell:RatingFeedbackCell, indexPath:IndexPath) {
    cell.overlayView.transform = CGAffineTransform.identity
    UIView.animate(withDuration: 0.2, animations: {
        if indexPath == self.selectedIndex {
            cell.imagesContainerView.transform = CGAffineTransform(scaleX: 1.1, y: 1.1)
        }
    })
    if indexPath != selectedIndex {
        cell.imagesContainerView.transform = CGAffineTransform.identity
    }
}

还有其他方法吗？

注意

上面的动画我已经使用UIScrollView完成，但是我想使用UICollectionView来完成。

The above animation I have done using UIScrollView, but I wanted to do the same using UICollectionView.

推荐答案

在您的自定义 UICollectionViewCell - RatingFeedbackCell 中，覆盖 isSelected 属性，然后在其中执行动画。单元格的选择和取消选择将自动进行，无需任何额外的努力。

In your custom UICollectionViewCell - RatingFeedbackCell, override isSelected property and perform the animation there. The selection and deselection of cells will be handled automatically without any extra effort.

示例：

class RatingFeedbackCell : UICollectionViewCell
{
    override var isSelected: Bool{
        didSet{
            UIView.animate(withDuration: 0.3, delay: 0.0, options: .curveEaseOut, animations: {
                self.transform = self.isSelected ? CGAffineTransform(scaleX: 1.1, y: 1.1) : CGAffineTransform.identity
            }, completion: nil)

        }
    }
}

如何 isSelected 可以使用，请参考： https://medium.com/@p.gpt10/uicollectionviewcell-selection-made-easy-41dae148379d

这篇关于在“ didSelectItemAt”上放大UICollectionViewCell。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！