Chapter 30
Creating an Animated Activity Ring with Shape and Animatable

The built-in Activity app uses three circular progress bars to show your progress of Move, Exercise, and Stand. The kind of progress bars is usually known as activity ring. Take a look at figure 1 if you haven't used the Activity app or you don't know what an activity ring is. Apple Watch has certainly played a big part that this round progress bar becomes a popular UI pattern.

Figure 1. A sample activity ring
Figure 1. A sample activity ring

In this chapter, we will look into its implementation and build a similar activity ring in SwiftUI. Our goal is not just to create a static activity ring. It will be an animated one that animates the progress change like that shown in figure 2. Or you can check out the demo video at https://link.appcoda.com/progressring.

Figure 2. Animated progress ring
Figure 2. Animated progress ring

To access the full content and the complete source code, please get your copy at https://www.appcoda.com/swiftui.

results matching ""

    No results matching ""