Chapter 31
Working with AnimatableModifier and LibraryContentProvider

Earlier, you have learned how to animate a shape by using Animatable and AnimatableData. In this chapter, we will take this further and show you how to animate a view using another protocol called AnimatableModifier. On top of that, I will walk you through a new feature of SwiftUI introduced in Xcode 12 that will allow developers to easily share a custom view to the View library and make it easier for reuse. Later, I will show you how to take the progress ring view to the View library for reuse. As a sneak peek, you can take a look at figure 1 or check out this demo video ( to see how it works.

Figure 1. Using a custom view in the View library
Figure 1. Using a custom view in the View library

Understanding AnimatableModifier

Let's first look into the AnimatableModifier protocol. As its name suggests, AnimatableModifier is a view modifier and it conforms to the Animatable protocol. This makes it very powerful to animate value changes for different types of views.

protocol AnimatableModifier : Animatable, ViewModifier

So, what are we going to animate? We will build on top of what we've implemented in the previous chapter and add a text label at the center of the progress ring. The label shows the current percentage of the progress. As the progress bar moves, the label will be updated accordingly, following the animation. Figure 2 shows you how the label looks like.

Figure 2. Animating the progress label
Figure 2. Animating the progress label

To access the full content and the complete source code, please get your copy at

results matching ""

    No results matching ""