iOS Swift Tutorial: Awesome Interactive Card View Animation with UIPropertyAnimator

🎃 HALLOWEEN DISCOUNTS 🎃

➡️ Start files:

➡️ Finished Project on Github:

✉️ COMMENTS ✉️
If you have questions about the video or Cocoa programming, please comment below.

[pebiwhiper]

Thanks Brian, I'm an iOS developer here in Brazil and I'm learning a lot from your videos.
Thanks for sharing and please continue with animations!

[coderacjhp]

For fixing inaccessible problem with main view :

1- Hide visualEffectView after adding it as a subview to view (inside setupCardView method)
2- Show it in "animateTransitionIfNeeded -> frameAnimator -> case .expanded:"
3- Add this method below of

blurAnimator.addCompletion { (_) in
if state == .collapsed {
= true
}
}

And that's it, your main view has been accessible.
Happy coding..

[cyangineer]

They added this API 2 years ago and I'm just now learning about this!? 🤯

[pratikgajbhiye]

kitna Sara Coding karta hai bhai tu...boht talented hai tu....

[yutaranova]

Brian, it is a really awesome tutorial, thank you so much! Please, do more about property animator!)

[MrAnonymous-jl]

Thank you, this is so helpful, but the problem is that once I implement this feature I will never be able to interact with any components that are located at the Main View Controller (The Pumpkins View Controller)

[RAMSESmusicofficial]

I thing that using fractionComplete is a pretty bad way to make card view. I have a better way, with pan gesture recognizer you can change y position of card view and depending on that position trigger animation when pan gesture ended. For example, when card view is expanded its y position is 100 and when it’s retracted it’s y position is 10 and depending on current y position trigger animation, is y pos is lower than 60 then the card view animate to retracted state and if it is greater than 60 it will animate to expanded state. Also pan recognizer have a velocity property so you can also change state depending on that.

[noobmasterk]

It's worked really well but as soon as we add it into tab bar controller it broke, how do we fix it?

[takasurazeem]

User interaction gets disabled on the parent view controller, how to fix that?
Solution:

[UdayBabariya]

little suggestion for "handlePan"

case .ended:
let translation = recognizer.translation(in: self.viewHandler)
var fractionComplete = translation.y / self.viewCard.frame.height
fractionComplete = cardVisible ? fractionComplete : -fractionComplete
if fractionComplete < 0.3{
cardVisible = false
for animator in runningAnimations{
animator.stopAnimation(false)
}

nextState, duration: 0.5)
}else{

}


by this the card view will get back to .expanded state if user dont want to .collapsed state each time

[marioguerrero]

Bryan, How do you know that much? I don't wanna sound rude but I have been learning day in day out from one year now and this seems to be endlessly, do you follow any special books or any straightforward documentation? I really would like to know it, because I notice it's better to know how the system works instead of making learning tutorials forever and ever.

[jeanmif]

Hello, I have followed step by step your explanations, and the func cornerRadiusAnimator doesn't work and I get an Optional error that appears with the func blurAnimator, because on case .expanded I receive first a nil. how can i fix that? many thanks for the help.

[seanperez]

Great video! Thanks! Please read the Swift Style Guide though to improve your formatting. It will greatly help my OCD while watching you code lol.

[DiegoAlejandroArizaMedina]

⭐️⭐️⭐️⭐️⭐️ What a great video and material, thank you very much for this video, I want to ask you what should be modified so that the "CardViewController.xib" does not occupy the full width of the screen.?

[sreehari]

@Brian Advent You missed the case that, in collapsed state, i pull up and pull down at the pan end. Then the cardViewController should remain collapsed.

[clintonbissong]

Hello Brian, i just watched your tutorial now and applied it on a mapView and after that the mapView became inactive, u can seem to do anything on it, i guess its blc theres a new view added on it, can you help me solve this issue please.

[VTL]

Please help, how can we open this card by tap on Cell in CollectionView ?

[DannyBoy]

Why did you use a ternary operator for cardVisible return? And why did you put . infront of collapsed and expanded? I'm new to Swift so I'm learning. Thanks

[ProNoobsful]

i try to change label inside Card View when is .expanded and i get a BUG, hes automaticly collapsed.... i think animation stoped when a changed label how fix it?.

[indiraamangeldinova]

thanx a lot!! it's REEAALLYY awesome!! thousands likes