Send message animation like iMessage send message using UICollectionView customization

Question

I am working on chat application. I am using UIcollectionview for display message. I am trying to create animation on the send button. When the user taps on send UIButton at that I need animation like iMessage. For creating such animation I use two different ways but not get proper animation. I created one demo. In that demo, I implemented different approaches.

Demo link:
https://www.dropbox.com/s/z8rxjkpuxzs95kp/AdvanceCollection.zip?dl=0

Below is animation that actually I need: https://www.dropbox.com/s/yo35lsm7yrc2oqu/Screen%20Recording.mov?dl=0

I apply 2 approaches. Below is approach description.

First approach: In the first approach, I customized FlowLayout. I know this is proper way but not getting proper curve animation.

override func initialLayoutAttributesForAppearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
            guard let attributes = super.initialLayoutAttributesForAppearingItem(at: itemIndexPath),
            let added = addedItem,
                added == itemIndexPath else {
                    return nil
            }
            // set new attributes

            attributes.frame = CGRect(x: 0, y: 0, width: 500, height: 500)
            //attributes.center = CGPoint(x: self.collectionView!.frame.width - 23.5, y: -24.5)
            attributes.center = CGPoint(x: 0.0, y: 100.0)

            attributes.alpha = 1.0

            attributes.transform = CGAffineTransform(scaleX: 0.15, y: 0.15)

            attributes.zIndex = 20

            return attributes
        }

Second approach: In the second approach, I am implementing animation in willdisplaycell method. According to my point of view, I know this is not the proper approach to customize layout but I tried. In second approach I am getting animation from bottom but x, y, width and height. Also whatever animation is visible is also not same as iMessage send message animation

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
        if !self.collectionData[indexPath.row].isAnimated
        {
            cell.frame =  CGRect(x: 0, y: chatView.frame.origin.y, width: 1000.0, height: chatView.frame.size.height)
            UIView.animate(withDuration: 10.0, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.6, options: UIViewAnimationOptions.curveEaseIn, animations: {
                cell.frame = CGRect(x:0, y:  cell.frame.origin.y, width: cell.frame.size.width, height: cell.frame.size.height)
            }, completion: { finished in
               self.collectionData[indexPath.row].isAnimated = true
            })
        }
    }

Answer 1

Edit: see tableView demo here animateCell

I think you may try using tableView instead of the collectionView to accomplish that as collectionView layout is awfully silly

I assume you have created a custom xib cell for your collectionView then do this

1- set the top , bottom , leading , trailing constraints properly to the superview of your message label

2- change the top constraint of the message label to be say 400

3- set hook that top constraint as IBOutlet

4- in cellForRowAt set that constraint to say 20

5- then do animation like that

  UIView.animateWithDuration(1.0,
 {
    cell.layoutSubview()

    cell.layoutIfNeeded()

 }

note: the problem with collectionView is chagning size for item so animation can happen , above solution works perfectly with tableView