Send message animation like iMessage send message using UICollectionView customization - ios

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