How does (or how would) Apple do this animation?

Question

What I'm trying to do:

The bottom (and top) cells of a "grouped style" UITableView have rounded corners - as is the default in many Apple iOS and non Apple apps. Sometimes cells are inserted via an animation, i.e:

[tableView insertRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationTop];

Now this works fine. Except: When a cell is inserted below the bottom cell, or above the top cell (for a grouped style table) - there seems to be no smooth animation.

The Problem:

What I mean is that the corners of the top/bottom cells need to animate from rounded to unrounded (as they are no longer top/bottom) - and this happens in a very jerky and unlike Apple fashion.

Does Apple ever do this in an App - if so, how do they do this smoothly? Otherwise, how could this be done right?

NB - I know this is a pretty minor detail, but I'm a bit of a perfectionist...!

Answer 1

Take a look at the Weather App that comes with iOS, in the flip side view where you configure your cities you will see a table that accommodates these animations. As Mark Adams points out, in iOS5 there is an enum for the OS to auto-detect which animation should be used. If you want to target pre-iOS5 then on your delegate method that commits deletion you should determine what cell is being deleted based on its row position, if its 0 you would use UITableViewRowAnimationBottom if it is the the last row you would use UITableViewRowAnimationTop and if it is somewhere in the middle you would likely use UITableViewRowAnimationTop so that the group shifts upward with the animation, you might want to play around with this though.

Answer 2

Sorry I don't have time to write actual code out and test it, but maybe I can give you a lead. You're basically asking to set the corner radius on only two corners of a cell, then fluidly animate them to sharp corners as they move toward the center of the table.

One way to do that might be to define your custom UITableViewCell with a CAShapeLayer as the background. CAShapeLayer is drawn from Quartz paths: see http://developer.apple.com/library/IOS/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/dq_paths.html#//apple_ref/doc/uid/TP30001066-CH211 . CAShapeLayer's path is animatable, but not with implicit animation. You'll need to use CAPropertyAnimation or perform your own interpolation. In my experience, for example in http://itunes.apple.com/us/app/blaster-through-asteroid-field/id414827482?mt=8 , doing your own interpolation is faster and more reliable (but other than the interpolation and collision detection everything most of the game relies on quartzcore, so I don't think you'll have a performance issue).

SUMMARY: Custom cell has CAShapeLayer backing. CAShapeLayer has path with 2 rounded corners. You animate the path property as the position of cell moves toward a certain point on screen. Done, smoothly animated rounded-to-square corners. Let me know if you try it out :-)

Other references: http://developer.apple.com/library/IOS/#documentation/GraphicsImaging/Reference/CAShapeLayer_class/Reference/Reference.html#//apple_ref/doc/uid/TP40008314

http://developer.apple.com/library/IOS/#documentation/GraphicsImaging/Reference/CGPath/Reference/reference.html

Answer 3

As there's no real (code complete) answer currently, here's a list of the best workarounds.

1. Change your interface so that this jerky animation never happens. This might mean using a plain style tableView as opposed to grouped style, or using the alternate style seen in the Weather app (see Chris Wagner's answer. Thanks Chris!). It might even mean using a completely different interface that doesn't incorporate this animation - this was the solution I went for, I managed to work out a UX alteration that is possibly even better than the original.

2. Deal with it. Apple seem to, in some of the less used parts of the OS or their apps.

3. File a bug report on bugreport.apple.com. It would be nice if Apple fixed this... I know it's a pretty minor detail, but that's why I like Apple products - cos they get the little details right!

4. Create a custom UITableViewCell subclass. I've thought a bit about this, and while it's a bit of a programming challenge, I think it's doable. Here's how: EDIT: See Rab's answer for some more detail. Still haven't coded it out yet but may give it a go when I get some time.

   • The custom cell has a property that defines whether the cell is a top, middle, or bottom cell. This can be set by a UITableViewController (or subclass etc).

   • The backgroundView property of the custom cells can be custom drawn using quartz for the rounded corners etc.

   • Whenever the property that defines the position of the cell is altered, the change to backgroundView can be animated. The hard part here is animating the curve of the corners... is this doable? Apple seems to do it in the corners of notification center, when it is
     pulled down and pushed up - so seems like it is possible.

   • If someone seriously want to do this, and put the code on gitHub... you would be awesome! And you would have bettered Apple's UI ;)