iOS - Objective-C - How to Simulate a Flipboard style Page Turn

Stephen Zaharuk / Tuesday, April 08, 2014

Flipboard is probably one of my favorite apps to use on the iPad. Its just one of those apps that I use every single day. And one of the reasons that i keep coming back to it, is its ease of use. That page turning gesture, just works really well, and doesn't get in the way. 

So, today I'm going to show you, how you can use that exact same interaction. You may be surprised at how little code is actually required. 

You can Download my Sample App here.

The first thing you'll want to understand is that we used one base image. And then spit it into 2 images that are used in 2 imageViews. 

If you've gone ahead and downloaded the app and run it, you'll see i kept the use case very simple. I have 2 sliders. One controls the left Image and the the other controls the right image. I did it this way so that you can really understand whats going on. 

Once you split the Image up, its important to get your alignment correct. In other words, your right imageView should obviously be pinned against your left imageView.

Once you have the alignment correct, you need to setup the position and anchor point of each imageView's layer:

_leftImageView.layer.anchorPoint = CGPointMake(1, .5);
_leftImageView.layer.position = CGPointMake(_leftImageView.frame.size.width, _leftImageView.layer.position.y);

_rightImageView.layer.anchorPoint = CGPointMake(0, .5);
_rightImageView.layer.position = CGPointMake(_rightImageView.frame.size.width, _rightImageView.layer.position.y);

A layer's default anchor point is .5,.5, which is the center of the layer. We need to change this for each of the imageViews. So for the left, the anchor point should be its right edge or 1,.5. And the right imageView's anchor point should be its left edge or 0,.5

We also want to change the position of the layer to have its x position be the width of the view.

By doing this, we're allowing our 2 images views to create the illusion that they're pivoting in the center.

The next and basically last step is to apply our transform to each imageView. We're going to want to allow each imageView to go from 0 - 90 degrees. For the rightImageView, it should always be a negative value -0 - -90

The code for transforming is very simple:

-(void)applyRotation:(CGFloat)degrees toView:(UIView*)view
   CATransform3D transform = CATransform3DIdentity;
   transform.m34 = -1.0 / 2000;
   transform = CATransform3DRotate(transform, degrees *( M_PI / 180.0f), 0.0f,0.5f, 0.0f);
  view.layer.transform = transform;

Since we're flipping the pages horizontally, we only want to modify the y axis, thus we have it set to be .5.

We also need to convert our degrees to radians, thus the M_PI/180.0f

The last bit of magic in this method is the m34 = -1.0/2000; Thats basically whats giving the illusion of the page coming at you. I recommend playing around with that value to see how it works and get the best look for your app. 

And thats it! I told you it was easy.


By Stephen Zaharuk (SteveZ)