Fun shadow effects using custom CALayer shadowPaths

Shadowed view using a rectangular shadowPath

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.

The resulting image, as you can see above, has a shadow as you’d expect. But since we’ve declared the shape the path will have, the iPad can drastically improve its rendering performance.

Through that process however, I decided to see what sort of effects I could pull off by passing in a path other than the default rectangular bounds of the layer. Since you can create any sort of path you want, I considered the different effects I could get away with by making non-rectangular paths and using them as shadows.

Trapezoidal CGPath

Trapezoidal shadow providing the illusion of depth

By carefully drawing a trapezoidal shape below and slightly beneath the view, you can give the illusion of depth.

Elliptical CGPath

Elliptical shadows create the illusion of a top-down light source

Just like the trapezoid, there are other effects you can achieve by playing with simple shapes for the use of creating shadows.

Paper-curl effect

Paper curl example using a curved path

By using a control point on a bezier curve, you can make the bottom side of the shadow curve inward, making it appear like the view is printed on paper that has been curled inward.

More possibilities than can be covered

There are plenty of other possibilities, more than can be covered here. Creating CGPathRef objects, either using UIBezierCurve or by using Quartz2D drawing methods, can easily step through composing shadows. Use a CGAffineTransform object to manipulate your path to stretch, scale, or rotate it as needed. Once you realize what your possibilities are, you can add an extra degree of polish to your application with very little effort.

If you want to play with the source use to create these examples, make sure you download the Xcode project ShadowTest.

Please post comments of any fun variations you manage to come up with!

Note: Special thanks go out to my beautiful wife Deanna for the picture of her Blood Elf Mage cosplay outfit she put together for Halloween.

Tags:

About Michael Nachbaur

iOS app developer, livin' the dream. Working from wherever I find myself; Hawaii, Santa Monica, Vancouver, and elsewhere.

5 Responses to “Fun shadow effects using custom CALayer shadowPaths”

  1. Didier Prophete November 17, 2010 8:16 am
    #

    Love the picture of you with a red wig :-)

    • Michael Nachbaur November 17, 2010 6:13 pm
      #

      Uhhh, read the bottom of the blog post. That’s actually a picture of my wife in her Halloween costume. But thanks for the compliment anyway. :-P

    • deanna December 7, 2010 2:23 pm
      #

      Why thank you Didier. :)

Trackbacks/Pingbacks

  1. Tweets that mention Fun shadow effects using custom CALayer shadowPaths | iOS/Web Developer's Life in Beta -- Topsy.com - November 16, 2010

    [...] This post was mentioned on Twitter by Michael Nachbaur, iPhone Dev News. iPhone Dev News said: Fun shadow effects using custom CALayer shadowPaths http://bit.ly/dovnEx [...]

  2. iOS Development Link Roundup: Part 1 | iOS/Web Developer's Life in Beta - November 25, 2010

    [...] Fun shadow effects with custom CALayer shadowPaths How to use shadows to make fancy effects (disclaimer: this is one of my own posts). [...]