Changing frames in layoutAttributesForElements slow down animation - ios

Question

I have a custom CollectionViewFlowLayout in which I override layoutAttributesForElements(in rect: CGRect) in order to get the elements positioned like in the design specs.
Everything is fine, but in some cases, to make a "selection mode" animation, I need to update the y position of the frames, but when I do that, my animation suffers a small delay.
If I maintain the y position and update the x, the width and the height of the attribute, the animation is ok.
Why does that happen? How could I avoid it?
Here's a mockup of my layout:
And here's the selected mode:
Basically my animation consists in changing the transform for the visible cells, in a way to make them smaller but centered, and to maintain the alignments and correct spacing I manipulate the frames in layoutAttributesForElements and invalidate the layout.
edit:
other solutions like changing the cellSize and minimumInteritemSpacing doesn't work for me because UICollectionView animation for cellSize change is extremely wonky

Answer 1

As I mentioned up in the comments, there seems to be an easier approach: I was able to get a pretty smooth implementation by just altering the values returned from collectionView(_:layout:sizeForItemAt:), collectionView(_:layout:minimumLineSpacingForSectionAt:) and collectionView(_:minimumInteritemSpacingForSectionAt:) as appropriate, and calling invalidateLayout() and layoutIfNeeded() inside an animation block at the right moment.
The return values for a really basic layout of items might look like this (where separatorSize(isInSelectionMode:) returns larger or smaller values depending on the selection state):
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let totalRowHeight: CGFloat = 100
let widthRatio: CGFloat
switch indexPath.item % 4 {
case 0, 3: widthRatio = (2.0 / 3.0)
case 1, 2: widthRatio = (1.0 / 3.0)
default: widthRatio = 1.0
}
return CGSize(width: (collectionView.bounds.width - separatorSize(isInSelectionMode: selectionMode).width) * widthRatio,
height: totalRowHeight - separatorSize(isInSelectionMode: selectionMode).height)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return separatorSize(isInSelectionMode: selectionMode).height
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return separatorSize(isInSelectionMode: selectionMode).width
}
Then you just toggle selectionMode inside an animation block while invalidating the layout.
I made a demo project here and a demo video here.