iOS Views and Animations: Learning by Stealing

Jan 15 2019 · Advanced · Video Course · 56 mins

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.

Version

  • Swift 4, iOS 12, Xcode 10

Introduction

4:13 Free

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.

1

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.

2

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

3

The Shield

4:32

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.

4

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.

5

In-Progress Spinner

13:03 Free

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

6

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

7

Conclusion

3:05

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.

8

Contributors

Comments