1

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.

Arun_
  • 1,806
  • 2
  • 20
  • 40
  • What happens if you change the cells frame directly instead of doing a transform on a subview? – solenoid Sep 07 '17 at 14:26
  • The frame changes suddenly without proper animation. @solenoid – Arun_ Sep 07 '17 at 14:31
  • try this: https://stackoverflow.com/questions/13780153/uicollectionview-animate-cell-size-change-on-selection - i think this might work due to the cells controller being told to update – solenoid Sep 07 '17 at 14:39
  • @solenoid I tried the reference you have provided, but couldn't figure out a way to maintain the "interItemSpacing". – Arun_ Sep 11 '17 at 13:11
  • are you still animating affine transform? Try setting the cells frame to animate and see if that works better – solenoid Sep 11 '17 at 13:59

1 Answers1

1

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

PGDev
  • 23,751
  • 6
  • 34
  • 88
  • What is the issue that you are facing? Have you given it a try? – PGDev Sep 11 '17 at 07:05
  • This will help to transform the item size but cell will overlap.To avoid that I need to increase the "interItemSpacing" with animation . – Arun_ Sep 11 '17 at 07:15