CODEWITHSUNDEEP
iosswiftanimationuicollectionview
Arun_
Arun_

Reputation: 1826

Zoom in UICollectionViewCell on "didSelectItemAt"

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.

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
    }
}

Is there any other way to do this?

Sample Animation

Note

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

Upvotes: 1

Views: 1703

Answers (1)

PGDev
PGDev

Reputation: 24341

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.

Example:

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)

        }
    }
}

How isSelected works, refer to: https://medium.com/@p.gpt10/uicollectionviewcell-selection-made-easy-41dae148379d

Upvotes: 1

Related Questions