Swift Magical Grid: Animate Out Zoom Bounce Effect (Ep 3)

Просмотров: 12 570 • 23.09.2020
437 0

Wrapping up our Magical Grid series with today's video, we're going to handle the trail of cells that animate in and animate out as we pan across the device. We'll be using a simple variable to keep track of the cell we are selecting, and finally apply a transform on our view through an animation. Enjoy.

Instagram Firebase Course

Facebook Group

iOS Basic Training Course

Completed Source Code

Follow me on Twitter: https://twitter.com/buildthatapp


This is a pretty fun tutorial. I wonder if it is possible to do with UICollectionView and if that would affect the performance in anyway

Sajal Kaushik

I am trying to add a label to the selected cellView but the label seems to be not appearing . Can someone help?


老师,您有可能教一堂课是 无限grid吗? 又可以放大缩小,又可以pan来pan去。跪谢。



Mandeep Sarangal

I Love you man!!!!!!!! Please never stop making such amazing videos! :)

Mohamed Mohsen

why we just didn't put the code inside the .ended gesture directly into the completion of the cellView animation ?!

Tommy Schmiedel

Hey Brian, great tutorial! What do you think about tagging your cells for identifying them in the pan gesture handler? For example, when creating your cells, you could convert the j and i values to a single integer with a pairing function (e.g. cantor pairing) and use the same technique later for identifying them. Would this have any impact (positive or negative) on performance? Example implementation:

extension CGPoint {
func pair() -> Int {
return Int((x + y) * (x + y + 1)) / 2 + Int(y)

// tagging the cell
cell.tag = CGPoint(x: i, y: j).pair()

// identifying the cell in the pan gesture handler
let cell = view.viewWithTag(gesture.location(in: view).pair())

Kind regards,

Ningze Dai

Hi Brian, I have one question. If I pan within a specific square, will the zoom in animation happen multiple times? From what I see in the video, this is not happening. Can you explain me the reason? The handlePan method is getting called multiple times while I pan within the same square, so I assume the animation should happen multiple times as well. But the fact is the animation only happen once. I don't know why.

Aakiv Bhatia

I accidentally clicked on your video ... And I am glad I did that ... !!! Now you have one more student... !!! Love your teaching style... !! Kudos to you !!

Li Xiaolong

Brian, I have a question.
After I ran this app, if I don't quit it by double click home button scroll up to quit, the app is still running at the background, is there a way to let this app refresh or quit by itself?
Thank you again.

I love your video.


This guy fucks!

Neelesh Shah

Brian, Can the selected cell assignment and the actual zoom can also be inside the != if condition (from line 63-72 as shown at 8:46)?, the state check if can be outside the if. That way the zoom animation also happens only when the cell changes (prevents possibility of multiple zoom logic firing if the pan is still inside the same cell)


Hey Brian,
I really like your videos. You are a great teacher!

Natalia Mamunina

Thank you Brian!

20k subscribers Without videos!!!

i wonder how old your youngest subscriber/supporter/student is!

Patrick Sam

Phenomenal..! Thanks Brian..!

Roman Filippov

It's necessary to make a weak self variable for using it inside a UIView.animation block? Or anyway the self will be deleted when an animation finishes?
P.S. Heartfelt greeting from Russia)

NK mewara

hi, brian.. you are doing great... please make a example for us like i have a collectionView with 4 cells and each cell contains separate collectionview with 10 cells when i tap one of 10 cells navigate another UIviewcontroller with some animations... hope you will make it for us..thanks

Angelo Julioth

What mic are you using?

Hylton Carboo

Hey Brian, can you recommend any books for iOS programming...

Andreas Ore Larssen

You should really get a pop filter for your microphone! Great videos. :)

Tzu-Chien Lu

Amazing tutorial, and i'm the 100th like

Alexander K

I like these short series :) Was looking forward to every single one!


Good stuff sir!!

Kaan Ozdemir

Thanks man, these "cool projects" are awesome!

Aleksandr Honcharov

Thank you very much!
This approach to make short but very informative and expressive videos is really good! :)

Lennart Philipp

This was an amazing tutorial! Can you please do things like this more often?


Hey Brian this is exactly what i´ve done a few days ago! Love it to see your videos and build it on my own to learn nifty techniques. Thank you so much!

Alexander Froelich

Very good videos!! If possible, make more short series like this!!!

myVictor lee

Awesome techniques, Brian!! Resounding yes to more videos like this, please! Cheers

Simen L

Love your videos, keep it up! :D


In theory, how would you create 400 independant views if i were to make it in storyboard, besides the obvious?

John Galew

Will you do a face reveal at 50k?

aly zakaria

thanks man but can you make retrica app please please reply

Jeremy Conley

Awesome series!

Ronit Mankad

A great tutorial Brian! Love this idea of breaking the app in parts and challenging us to try and think the solution. Please make more app videos like this.


Amazing Brian. Are you going to build the Tinder App?


Hey! I have a question about making a keyboard app, I want to know if my idea is possible, or will it only work for rooted iPhones.