Animating UIView always goes to top left, even when the center is somewhere else

Question

I am trying to animate a UIView shrinking and moving to a different center point. It starts when the user taps a certain UICollectionViewCell, a new UIView is made, centred on the cell, and starts expanding until it fills the entire screen. This works fine. I store the original center point of the cell in the new UIView (custom class with property originCenter).

        let expandingCellView = SlideOverView(frame: cell.bounds)
        expandingCellView.center = collectionView.convert(cell.center, to: self)
        expandingCellView.textLabel.text = cell.textLabel.text
        expandingCellView.originWidth = cell.bounds.width
        expandingCellView.originHeight = cell.bounds.height
        expandingCellView.originCenter = self.convert(expandingCellView.center, to: self)
        expandingCellView.originView = self
        self.addSubview(expandingCellView)

        expandingCellView.widthConstraint.constant = self.frame.width
        expandingCellView.heightConstraint.constant = self.frame.height

        UIView.animate(withDuration: 0.3, animations: {
            expandingCellView.center = self.center
            expandingCellView.layoutIfNeeded()
        })

This code works perfectly fine. Now I have added a button to that expanded view, which executes the following code:

        widthConstraint.constant = originWidth
        heightConstraint.constant = originHeight
        print(self.convert(self.originCenter, to: nil))

        UIView.animate(withDuration: 0.5, animations: {
            self.center = self.convert(self.originCenter, to: nil)
            self.layoutIfNeeded()
        }, completion: { (done) in
//            self.removeFromSuperview()
        })

The shrinking of the view to its original size works fine. The only thing that doesn't work is the centering. I take the original cell centerpoint, and convert it to this views coordinate system. This produces coordinates which I think are correct. However all the views just move to the top left of the screen.

Below is a link to a screen recording. The first UIView prints its new centerpoint as (208.75, 411.75) and the second UIView I open prints its center as (567.25, 411.75). These values seem correct to me, however they don't move to this point, as you can see in the video. Any way I can fix this?

Even when setting the new center to for instance CGPoint(x: 500, y: 500), the view still moves to x = 149.5 and y = 149.5

Video: https://streamable.com/pxemc

Did you want to achieve the same App Store present effect by doing this? — AchmadJP, Mar 13 '20 at 02:27
Somewhat similar yes. The uiview shouls go back to the cell that was tapped on. — Thijs van der Heijden, Mar 13 '20 at 07:15

score 0 · Answer 1 · answered Mar 13 '20 at 07:31

Create a var that has a weak reference to the cell

weak var selectedCell: UICollectionViewCell!

assign the selected cell in CollectionView delegate didSelectItemAt call

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    selectedCell = collectionView.cellForItemAtIndexPath(indexPath)
}

after add expandingCellView as subview do this to make it go from cell size to full screen

// make expanding view the same size as cell
expandingCellView.frame = selectedCell.frame

// animate
UIView.animate(withDuration: 0.5, animations: {
    self.expandingCellView.layoutIfNeeded()
    self.expandingCellView.frame = self.view.frame
}, completion: { (_) in
    self.expandingCellView.layoutIfNeeded()
})

just reverse it to make it small again like the cell size

// animate
UIView.animate(withDuration: 0.5, animations: {
    self.expandingCellView.layoutIfNeeded()
    self.expandingCellView.frame = self.selectedCell.frame
}, completion: { (_) in
    self.expandingCellView.layoutIfNeeded()
})

frame use global position.

frame vs bounds

You can try it in a new project, i'v tried it and works – AchmadJP Mar 14 '20 at 03:48 — AchmadJP, Mar 14 '20 at 03:48

Animating UIView always goes to top left, even when the center is somewhere else

1 Answers1