Clean autorotation transitions in a paging UIScrollView

Question

I have a paging UIScrollView in which the user pages horizontally through images, like Apple's Photos.app. That works, but now I'm trying to add rotation support.

I've got the view rotating OK and have managed to set the contentSize, bounds, and subviews' frames properly to adapt to the different orientations. So before and after the rotation, everything is OK.

However, the transitions themselves are awkward. The first image rotates perfectly, as if the axis of rotation is in the dead center of the image (scrollview frame). The second image "swings" in because the axis of rotation is in the same place: the center of the first image. The farther away I get from the first image, the faster the "swing."

I can probably mask this by overlaying an opaque UIView before rotation and hiding it after. But that's a hack. There must be an elegant way to do this...

Answer 1

It sounds like you are applying the magic, needed to get the rotated version on screen at the right place, the wrong way.

Since you didn't share any code, the following is just guesswork. Presumably, you apply a rotation and a translation. It sounds like you are rotating the contents of the UIScrollView. Getting this right will be tricky. It's hard to say anything conclusive without code, but if you only have 1 rotation and 1 translation, you're doing it the wrong way. You need to translate the current view to the pivot point, rotate, and translate back. Otherwise the translation will be part of the rotation (hence the big swing).

You'd better rotate the UIScrollView itself. It will always be in a defined location (namely: the screen) with a defined center. The content will then rotate with it.

Answer 2

Frankly, I don't know what you're doing, since you haven't shown us much at all.

But!

I created a sample project with a few views in a scroll view, and it works fine. Feel free to pick it apart as you wish. It works by creating 5 views, and adding them to the scroll view. Then after these views are set up for the first time, and every time the application rotates, it calls my method alignSubviews to lay them out at the right page locations and make them the same size as the scroll view, while updating the scroll view's contentSize. Before the rotation occurs, it keeps track of what page the scroll view is currently on, and then resets it to that page during the rotation (because the page size has to change).

Download "Rotolling"!