How to perform a zoom-in , zoom-out animation for tableview cells?

Question

I was wondering how can i can recreate this animation? The first 2 cells stays as it is but only the cells from index 2 are having animation.

Right now i am recreating this by using

let rotationTransform = CATransform3DTranslate(CATransform3DIdentity, -500, 10, 0)
cell.layer.transform = rotationTransform

Some how this doesn't give a good look and feel like the one in the gif , is there any pod or some way to make this happen?

Additional INFO : The first cell is just a simple cell, the second cell is a collectionView and the next cells are repeating ones. The swipe is currently working with swipe gestures, i just need information on how recreate this zoom-in , zoom-out animation.

Any help would be appreciated. Thanks

Edit : I tried changing the gif size to medium on the question and it wasn't playing so i changed it to normal size again.

Please check this Same things I have done with 1) https://github.com/xmartlabs/XLPagerTabStrip 2) https://github.com/subinspathilettu/SJSegmentedViewController — Nikunj Kumbhani, Jun 25 '21 at 11:22
@NikunjKumbhani Hi, do you know anyway to recreate the animation? The stuff you gave works but it doesn't give this animation... — Zyfe3r, Jun 26 '21 at 04:50
Did you asked about loading animation? If yes then you need to use library for that as well — Nikunj Kumbhani, Jun 26 '21 at 06:16
@NikunjKumbhani do you know of any such libraries ? I tried and i couldn't find any ! — Zyfe3r, Jun 26 '21 at 06:17

Zyfe3r · Accepted Answer · 2021-07-01T03:11:07.197

I actually figured out a simple way to perform this animation. There might be better ways to do this, but just incase someone needs help in future.

We write 2 functions for zoomIn and zoomOut (can be used anywhere)

func zoomOut(view : UIView,duration : Double,delay : Double)
{
    UIView.animate(withDuration: duration, delay: delay, options: UIView.AnimationOptions.curveEaseIn, animations: {
        view.transform = CGAffineTransform.identity.scaledBy(x: 0.95, y:  0.95)
     })
}
func zoomIn(view : UIView,duration : Double,delay : Double)
{
    UIView.animate(withDuration: duration, delay: delay, options: UIView.AnimationOptions.curveEaseIn, animations: {
        view.transform = CGAffineTransform.identity
     })
}

Then we write functions for movement (Can be used anywhere)

func movementAnimation(duration:Double,X:CGFloat,Y:CGFloat,item:UIView)
{
    UIView.animate(withDuration: duration) {
      item.transform = CGAffineTransform(translationX: X, y: Y)
        
    }
}

and finally we combine these 2 to get a similar animation !

zoomOut(view: Table, duration: 0.1, delay: 0)
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
        movementAnimation(duration: 0.2, X: -500, Y: 0, item: self.Table)
            }
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
        movementAnimation(duration: 0, X: 500, Y: 0, item: self.Table)
        movementAnimation(duration: 0.2, X: 0, Y: 0, item: self.Table)
            }
zoomIn(view: self.Table, duration: 0.1, delay: 0.6)

Here first the view is zoomedOut (reduce scale to 0.95) then its moved outside scree with 0.2sec duration.Once its outside screen, its immediately moved to right side of the screen with 0sec duration. Then with a 0.2sec duration we move it back to original position. Now we call zoomIn to get the view back to its original size with a duration of 0.1sec. The 0.5sec is the total amount of time taken for the zoomOut + movementOut + movementIn functions.

And finally reloading the Table

DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
self.Table.reloadData()
}

Hope this helps someone and thx to 'Nikunj Kumbhani' for the pod idea!

How to perform a zoom-in , zoom-out animation for tableview cells?

1 Answers1