3

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
            })
        }
    }
Sanjaysinh Chauhan
  • 201
  • 1
  • 7

1 Answers1

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

Shehata Gamal
  • 98,760
  • 8
  • 65
  • 87
  • I followed provided steps but didn't get actually required output . can you please explain more or create little demo and share. Thanks – Sanjaysinh Chauhan Dec 25 '17 at 12:06
  • No man it's not proper animation. I provided video for animation. Please check animation link. Also, I provided a demo for this. My animation is too nearer to requirement but it's not proper. https://www.dropbox.com/s/yo35lsm7yrc2oqu/Screen%20Recording.mov?dl=0 Thanks for your time. – Sanjaysinh Chauhan Dec 25 '17 at 14:03
  • decrease the duration – Shehata Gamal Dec 25 '17 at 14:12
  • Do you think If I decrease duration than animation is look like iMessage? I used TableView many places. According to my point of view, TableView can't solve this problem. I have done so much research on this. Whatever steps you provided in that manner iMessage send animation not possible. https://stackoverflow.com/q/47926643/4128762 – Sanjaysinh Chauhan Dec 25 '17 at 14:14
  • yes i pushed an update now with duration decreased , the problem bro is in cell design and layout not in animation – Shehata Gamal Dec 25 '17 at 14:15
  • my demo uses tableView as it's better to use it instead of vertical collectionView – Shehata Gamal Dec 25 '17 at 14:18
  • collectionViews designated for complex custom layout , vertical is pure perfect for tableView – Shehata Gamal Dec 25 '17 at 14:19
  • last duration set 0.4 – Shehata Gamal Dec 25 '17 at 14:19