The Power of Hexagons: Falling down a hole, that sinking feeling in Swift (CGPath, CALayer, CoreGraphics)

This is a brief post in which I'm going to look at sending an imaginary block down an imaginary hole from the last power of hexagons post. For this to happen we need to divide our tiles and blocks into three types: (1) ones that will be behind the object that will descend down the hole, (2) ones that will be in front of the descending object, and (3) cosmetic ones that don't matter whether they are in front or behind. Once we've established which is which, we can then decide on the drawing order (and/or zPosition) assignment. So first let's draw the blocks and tiles placed behind our block.

Rear blocks and tiles

By drawing the objects that are furthest back, we've created a range of three starting positions, and now I'll add the block (to be animated) at one of these positions:

Just for fun let's see what happens when the block moves through the hole right now:

Front blocks and tiles

Clearly we need the blocks that will conceal our yellow block as it descends a depth of two blocks. Otherwise the illusion will be broken.

And that's it. Everything else that we add will be cosmetic.

Animation

The animation is a two-step CABasicAnimation. First the block slides over the hole.

Before descending (in the second animation)

Until it is almost obscured.

Conclusion

The best way to view the animation is by cutting and pasting the Gist into an Swift (iOS) initial view controller before building and running, then pressing the "Press Here" button. Enjoy!

Follow @sketchytech