CALayer Shadows

Here’s a neat little piece on how to produce efficient shadow effects using a CALayer’s shadowPath property:

Fun shadow effects using custom CALayer shadowPaths

The what property, you ask? Yep, we’d missed it so far too, but it seems pretty useful:

I recently had to improve the performance of a few views that utilized CALayer-based shadows on rounded-rect UIView objects. On this particular iPad application, when the device was rotated, the views rotated quite a lot slower than we would have hoped. It wasn’t a show-stopper, but the jerky rotation animation made it look cheap and unpolished. The easiest way to have our cake, and eat it too, was to set a custom CGPath to the layer’s shadowPath property. This told UIKit to set the inside of the path to opaque, reducing the amount of work the rendering engine needed to perform…

And especially useful since it can be an arbitrary path, not just layer bounds! The sample code with the article shows how to make, for instance:

Trapezoidal shadow – depth illusion

shadow-2-300x298.png

Elliptical shadow – top down light source illusion

shadow-3.png

Paper curl effect

shadow-4.png

Nifty stuff from minimal coding, indeed!

UPDATE:

For more CALayer info, note this as always excellent tutorial from Ray Wenderlich:

Introduction to CALayers Tutorial

Alex | December 4, 2010
  • umar January 8, 2011 at 6:04 am
    Thanks Nice code. Can I create this type of effect on UIView check this link http://www.flickr.com/photos/24313234@N07/5323036634/ please write the code for that:)

Leave a Reply