I am following THIS tutorial and achieve that animation with this code:
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
cell.layer.transform = CATransform3DMakeScale(0.1,0.1,1)
UIView.animateWithDuration(0.25, animations: {
cell.layer.transform = CATransform3DMakeScale(1,1,1)
})
}
But I want to update something in this cell animation like when I scrolling into tableView the cell is small like (0.1,0.1,1)
at the start and after that It scales like (1,1,1)
but I want to apply like bubble type effect like it is small at start after that it comes at its original Scale like (1,1,1)
and one it is zoom and again it comes into its original scale like (1,1,1)
.
please guide me how can I achieve that animation?
EDIT:
I tried this but its not that kind of smooth and not exact what I want.
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
cell.layer.transform = CATransform3DMakeScale(0.1,0.1,1)
UIView.animateWithDuration(0.3, animations: {
cell.layer.transform = CATransform3DMakeScale(1,1,1)
})
UIView.animateWithDuration(1, animations: {
cell.layer.transform = CATransform3DMakeScale(2,2,2)
})
UIView.animateWithDuration(0.3, animations: {
cell.layer.transform = CATransform3DMakeScale(1,1,1)
})
}
Swift 4
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
UIView.animate(withDuration: 0.4) {
cell.transform = CGAffineTransform.identity
}
}
What you need is an ease out back animation. For more information check out http://easings.net
You can make parametric animations using this library https://github.com/jjackson26/JMJParametricAnimation/tree/master/JMJParametricAnimationDemo
For now, the effect you are trying to do can be roughly done using the code below. You have to do the scaling animation one after another. The way you have done makes all animations start together.
Adding the next animation code in the completion block starts it after the animation. You can further tweak the timings to get the rough effect you need.
cell.layer.transform = CATransform3DMakeScale(0.1,0.1,1)
UIView.animateWithDuration(0.3, animations: {
cell.layer.transform = CATransform3DMakeScale(1.05,1.05,1)
},completion: { finished in
UIView.animateWithDuration(0.1, animations: {
cell.layer.transform = CATransform3DMakeScale(1,1,1)
})
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With