For gesture-centric apps, it can be difficult to quickly and easily show how to perform specific gestures. Two handed gestures, like Loose Leaf’s ruler gesture, can be particularly difficult to describe. As I was making tutorial content for Loose Leaf, I quickly realized that showing dots for touch locations just isn’t enough.

Importantly, the shadows actually animate to match your hand – notice the pinch gesture above actually animates the pinch shadow slightly. Also in the code is a two finger ‘peace sign’ shadow, perfect for a two finger pan. And also a single finger shadow for taps and single finger pan.

All of the code for the shadows is open sourced and available at https://github.com/adamwulf/ios-hand-shadows.

In order to create realistic shadows, I needed to start with professional quality hand silhouettes – I purchased and used this file for the initial shadow shapes, and then worked to make then easily animatable. It’s within the license for me to distribute this derivative work free of charge, but if it makes your inner-lawyer nervous you can always buy your own copy for $1.

How it works

For the curious, here’s how I was able to make this work. First, i downloaded the shadow file as an .eps file, and I then converted that file into an svg using this site. Next, I imported that svg file into PaintCode, which made it easy to export any of those hand paths as UIBezierPath code.

The interesting bit of code was interpolating between two different paths during the gesture, so that the wide open pinch could smoothly deform into the closed pinch. To do that, I edited the paths so that they both contained the same number of points.

Once the paths have the point count, interpolating is easy – use a smoothing number between 0 and 1, and calculate a weighted average of the two point locations – that’s it!

The rest of the code helps display those paths on screen, manage multiple shadows on screen at a time, etc.

Enjoy!

Grab the code here! If you found this helpful, shares and tweets are always appreciated, and of course, support your local indie dev and check out Loose Leaf!