Swift - How to make cell shrinking effect when tapped in UICollectionView (like ios 12 Shortcut app and App Store app)

Question

I am thinking that the way to implement it would be using UIView.animate (...). But the part that got me stuck is about how to add gesture recogniser to detect touches. I tried to use UILongPressGestureRecognizer but that causes user to be unable to scroll through the cells. Any help here would be greatly appreciated.

Let me explain my question more clearly since some users here gave me irrelevant answers. Please refer to IOS 12 ShortCut App and see the cell shrinking effect as users scroll through the cells in the gallery tab

Below is my attempt to do the animations in didHighlight function. Although it works there is a slight delay between when the cell is tapped and when the cell start animating (around 0.1s to 0.3s), unlike the ShortCut app where the cell shrinks almost instantly and feels more natural

    func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
    let cell = collectionView.cellForItem(at: indexPath)
    UIView.animate(withDuration: 0.1) {
        cell?.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    }
}

func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
    let cell = collectionView.cellForItem(at: indexPath)
    UIView.animate(withDuration: 0.1) {
        cell?.transform = CGAffineTransform(scaleX: 1, y: 1)
    }
}

Magnas · Answer 1 · 2018-10-05T07:35:08.313

I've done something similar but put the animation in the didSelectItemAt: method rather than the highlighting methods. I segue to another view and so put the segue in the completed part of the closure.

UIView.animate(withDuration: 0.1, delay: 0, options: [.curveEaseOut], animations: {
            cell.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
        }) { finished in
            UIView.animate(withDuration: 0.1, delay: 0, options: [.curveEaseIn], animations: {
                cell.transform = CGAffineTransform.identity
            }) { finished in
                self.performSegue(withIdentifier: "YOUR-SEGUE-HERE", sender: indexPath)
            }
        }

EDIT: Apologies. I think I was reading what I wanted to read. I took a look at the app and I think you will need to do something like capturing the touches by putting the following into your UICollectionViewCell subclass. Obviously you'll need to change things for your particular use case.

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    UIView.animate(withDuration: 0.1) {
        self.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
    }
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    UIView.animate(withDuration: 0.1) {
        self.transform = CGAffineTransform(scaleX: 1, y: 1)
    }
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    UIView.animate(withDuration: 0.1) {
        self.transform = CGAffineTransform(scaleX: 1, y: 1)
    }
}

Hey thanks so much for the answer but it didnt exactly created the same effect as the ios shortcut app. It seems like whenever the cell shrinks, touchesMoved function is called. So the cell can never fully shrink because it gets interrupted halfway by the TouchesMoved Function — Swee Sen Koh, Oct 05 '18 at 16:59

Swift - How to make cell shrinking effect when tapped in UICollectionView (like ios 12 Shortcut app and App Store app)

1 Answers1