3

I've got a UIScrollview which fills a landscape screen, which contains a small tree of UIViews around inside it which I can scroll horizontally. I'd like to apply a barrel distortion to the scrollview, so that as the subviews move from the outside to the centre of the scrollview, they change shape.

What is a good what to go about applying distortions like this?

Is there a way to override drawRect for the scroll view, draw onto a bitmap, distort it, then draw that to the ScrollView's context instead? Or are there built in APIs to do this sort of distortion?

barrel distortion
(source: arielnet.com)

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Douglas
  • 36,802
  • 9
  • 76
  • 89

1 Answers1

1

You could get close to this effect by properly transforming the layers for each of your UIViews. Using a CATransform3D, you can rotate and translate each of the layers in 3-D, as well as apply a perspective effect. For your case, you can translate each of your UIView layers so that they are like a carousel, with the middle view forward and straight-on to the screen, and the side layers tilted and recessed slightly from the screen. This would not cause a curvature of the layers themselves (they will still be drawn as rectangles), but if you apply a transform on the main view's layer to create a perspective effect you should be able to get very close.

For an example of this kind of 3-D positioning of layers, I recommend this example where a full 3-D maze is constructed out of CALayers.

As far as the scroll view goes, you probably will have to do custom touch handling for this. You might be able to get by with respinding to the UIScrollViewDelegate methods like scrollViewDidScroll:, but I've not tried this myself.

Community
  • 1
  • 1
Brad Larson
  • 170,088
  • 45
  • 397
  • 571