iOS Views and Animations: Learning by Stealing

In this course we'll deconstruct a complex button from a popular iOS VPN app, and figure out how to rebuild it. Covering Core Animation, UIView and Swift. By Sam Davies.

Leave a rating/review
Save for later
Comments
Share
01
Toggle description

Why should you steal UI from other apps? How should you start? Discover answers to these questions, and see the topics you'll cover in this course.

Toggle description

Start small by creating just the circle at the center of the ExpressVPN button. See how to use CAShapeLayer and how subtle shadows add punch.

Toggle description

Discover why using lazy properties in Swift can improve readability, before finishing off the central button with an addional circular shape layer.

The Shield 4:32
Toggle description

Time for a second layer type—you'll discover how you can use a gradient layer to add subtle variation to your design, as you start to create the outer shield.

Toggle description

See how to use layer masking together with bezier paths to turn the background gradient layer into the large shield shape that sits behind the button.

Toggle description

Discover how you can combine a gradient layer, some simple masking with shape layers, and basic animation to create the cool spinner effect.

Toggle description

Analyze how the on/off animation appears to behave, before breaking it down and recreating it with shape layers, and core animation.

Conclusion 3:05
Toggle description

Recap what you've learned throughout this course, and reflect on why stealing UI from other apps is a good idea. See how to apply the same techniques yourself.