JoniVR / VerticalCardSwiper

A marriage between the Shazam Discover UI and Tinder, built with UICollectionView in Swift.
MIT License
1.4k stars 101 forks source link

Animation bug caused by anchorPoint? #4

Closed JoniVR closed 6 years ago

JoniVR commented 6 years ago

General

I'm just going to use this issue to document this bug, so people know I'm aware of it and looking for fixes. The bug is a visual animation glitch that sometimes happens when the user swipes away a card. I personally think it's related to resetting the anchorPoint of the CardCell, but I'm not sure about it yet.

Steps to reproduce

  1. Scroll down a few cards
  2. Swipe away some cards (left, right or both)
  3. Scroll back to first card
  4. Try swiping away the first card.
  5. Notice the wrong animation (might take a couple of tries)

Description

~~After some testing I think this bug is caused by calling self.layer.anchorPoint = CGPoint(x: 0.5, y: 0.5) inside of layoutSubviews() in the CardCell. We have to do this to reset the anchorPoint (x: 0.5, y: 0.5 is the default anchorPoint).~~

The problem is that we're manipulating the anchorPoint to animate the card, but need to reset the anchorPoint after calling resetToCenterPosition(). We can't reset the anchorPoint inside of resetToCenterPosition() (as far as I'm aware) because that screws up the animation. So I tried putting it in layoutSubviews(), this worked for the most part, except that it is causing this behaviour (you can test when it's getting called by putting a print statement inside of layoutSubviews).

So I need to find a way to reset the anchorPoint after calling resetToCenterPosition() and before the user starts scrolling. I'm just not sure where to put it as of now.

edit: After some further testing it looks like the issue is not related to the anchorPoint being reset, looking into it further to find the cause.

More

As always, any help is always appreciated, if you found a fix or have a solution before I do, feel free to create a Pull Request or respond to this issue.

JoniVR commented 6 years ago

Can't seem to find out the exact issue, I discovered that there's also an animation glitch happening on the last 2 cells, so it could have something to do with the fact that animations need to be handled differently for the first and last cells.

Here's a video showing the visual glitches

edit: Seems like the top animation glitch only happens after pressing the status bar to "scroll-to-top".

JoniVR commented 6 years ago

I asked a question on stackoverflow about this, and someone suggested that it is probably related to the implicit animations inside of performBatchUpdates to remove the cell after swiping it away.

collectionView.performBatchUpdates({
                collectionView.deleteItems(at: [indexPathToRemove])
            }) { [weak self] (finished) in
                if finished {
                    self?.collectionView.collectionViewLayout.invalidateLayout()
                }
            }

I tested this out and it does look like this might be the case, I'll look into (hopefully) fixing it whenever I have some more spare time.