Animate objects when UIScrollView scrolls

Question

I have a UIScrollView which has two pages and only scroll horizontally.

The scrolling and paging is controlled using a UIPageControl. I have placed a UIImageView on the scrollView which contains an image of an iPhone (shown in red in the image below) that says Hello inside page 1.

I wanted to animate the UIImageView to rotate and change its position as shown in the image when the user scrolls from page-1 to page-2. Also the animation should ideally rotate back when the user is scrolling back from page-2 to page-1.

The animation or movement of the UIImageView is based on how much the user is scrolling horizontally and not based on time.

How can I rotate the UIImageView back and forth based on the scroll position of the UIScrollView?

Answer 1

Set a delegate for your scroll view. Probably you want your view controller to be the delegate. You need to add UIScrollViewDelegate to its list of protocols.

Then, in the delegate, implement scrollViewDidScroll:. In scrollViewDidScroll:, look at the scroll view's contentOffset. Based on the contentOffset, set the image view's transform and center to rotate and move it where you want.

Answer 2

To find by how much the scroll view has scrolled, you can check UIScrollView's contentOffset property:

contentOffset - The point at which the origin of the content view is offset from the origin of the scroll view.

Then to rotate that image view, you could do this:

self.imageview.transform = CGAffineTransformMakeRotation(M_PI/2);

As far as the animation goes, I personally don't have much experience with it. But you could have a look at Simple Animation Using UIImageView.