elastic rubber band effect for iPhone?

Question

I have a UITableView within a UIView that has a PNG of a rubber rope attached to the top of the tableview. It stays on top though when the table slides down, it's not a part of the table, just a part of the view.

Desired behavior:

• when the user pulls the tableview down, I'd like somehow for this rope to extend realistically like a rubber band

• when they let go of the table, the table cells extend back up with the same speed as the attached rubber band.

This is not for scrolling through the table view, but when you only have say 2 or 3 cells and you pull it down, and it extends a rope, and when you let go, it goes back up.

It's the same behavior as a default table view, but now there's just a rope attached to the top.

I'm not looking for any specific answers since I know that can be difficult, but if you have any idea what direction I should be heading in to accomplish this, please share.

Answer 1

I came up with two different ideas:

Using Images as transitions and stretching

My first idea is to create a bunch of images for each transition. Of course, not the entire animation, just 5 different states for the rubberband, something like this:

Each transition is then fit to the next one by stretching the image, and then swap to the next state until the last one is reached. This wouldn't look entirely realistic, but convincing enough, and enough to capture the attention of the user.

Using CGPathAddEllipseInRect

On the other hand, if stretching & swapping images doesn't work, you could draw an oval using CALayer methods, something like a CGPathAddEllipseInRect (sample code here), and drawing a close loop. This is more handy as it draws the entire transition.