How to get the animation I want? - ios

Question

I wanted to make some tests. I thought, let's make an animation for a cell in a UITableView such as: it goes from the normal size, expand horizontally a bit over the normal size, reduce horizontally a bit under the normal size and go back to the normal size. So I thought make this:
let width = cell.frame.size.width
cell.frame = CGRectMake(0, cell.frame.origin.y, width, cell.frame.size.height)
UIView.animateWithDuration(4.25, animations: {
cell.frame = CGRectMake(width * -1/8, cell.frame.origin.y, width * 5/4, cell.frame.size.height)
}, completion: { finished in
UIView.animateWithDuration(2.5, animations: {
cell.frame = CGRectMake(width * 1/8, cell.frame.origin.y, width * 3/4, cell.frame.size.height)
}, completion: { finished in
UIView.animateWithDuration(1.25) {
cell.frame = CGRectMake(0, cell.frame.origin.y, width, cell.frame.size.height)
}
})
})
Use animations and completions in cascades. The problem is at the beginning. The frame reduces quickly horizontally (instead of expanding) then slowly (4.25 seconds) expands to the normal size. Then it reduces and then expand back to normal as expected.
Am I doing something wrong?

Answer 1

I was actually fiddling with animations just like the one you were doing just now :)
You can do the horizontal effect much easier; Instead of redefining the frame itself, you can simply adjust the horizontal bounds of the cell:
cell.bounds.size.width += 30 //grow it horizontally by 30 points
There's also a much more succinct method in dealing with this problem: UIView.animateKeyframesWithDuration(_ delay: options: animations: completion:)
With animateKeyframes, you can string a list of different animation effects in order, which is what you want. I'll start you off:
UIView.animateKeyframesWithDuration(4.0, delay: 0.0, options: nil, animations: {
UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {
self.cell.bounds.size.width += 30
})
UIView.addKeyframeWithRelativeStartTime(2.5, relativeDuration: 0.1, animations: {
self.cell.bounds.size.width -= 60
})
UIView.addKeyframeWithRelativeStartTime(3.0, relativeDuration: 0.1, animations: {
self.cell.bounds.size.width += 30
})
}, completion: nil)
To put it simply, you define a duration for which the animation will occur. For the above code sample, I've defined 4 seconds.
Within the 4 seconds, I defined 3 different animations, specifying at what time they should fire off, and how long they should be fired for (relativeDuration, which is relative to the 4.0 second value).
Adjusting those numbers will allow you to customize the timings.
Hope that works!