Chapter 9
Basic Animations and Transitions

Have you ever used the Magic Move animation in Keynote? With Magic Move, you can easily create slick animations between slides. Keynote automatically analyzes the objects between slides and renders the animations automatically. To me, SwiftUI has brought Magic Move to app development. Animations using the framework are automatic and magical. You define two states of a view, and SwiftUI will figure out the rest, animating the changes between the two states.

SwiftUI empowers you to animate changes for individual views and transitions between views. The framework comes with a number of built-in animations to create different effects.

In this chapter, you will learn how to animate views using implicit and explicit animations provided by SwiftUI. As usual, we'll work on a few demo projects and learn the programming techniques along the way.

Below are some of the sample animations you will learn to build.

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

Creating a Loading Indicator Using RotationEffect

The power of SwiftUI animation is that you don't need to take care how the views are animated. All you need is to provide the start and end state. SwiftUI will then figure out the rest. If you understand this concept, you can create various types of animation.

Figure 3. A sample loading indicator
Figure 3. A sample loading indicator
Figure 4. A sample loading indicator
Figure 4. A sample loading indicator
Figure 5. Another example of the loading indicator
Figure 5. Another example of the loading indicator

Creating a Progress Indicator

The loading indicator provides some kinds of feedback to users indicating that the app is working on something. However, it doesn't show the actual progress. If you need to give users more information about the progress of a task, you may want to build a progress indicator.

Figure 7. A progress indicator
Figure 7. A progress indicator

Delaying an Animation

By mixing and matching the values of duration and delay, you can achieve some interesting animation like the dot loading indicator below.

Figure 8. A dot loading indicator
Figure 8. A dot loading indicator

Transforming a Rectangle into Circle

Sometimes, you probably need to smoothly transform one shape (e.g. rectangle) into another (e.g. circle). How can it be implemented? With the built-in shape and animation, you can easily create such transformation like the one shown in figure 9.

Figure 9. Morphing a rectangle into a circle
Figure 9. Morphing a rectangle into a circle

Understanding Transitions

What we have discussed so far is animating a view that has been existed in the view hierarchy. We create animation to scale it up and down. Or we animate the view's size.

SwiftUI allows developers to do more than that. You can define how a view is inserted or removed from the view hierarchy. In SwiftUI, this is known as transition. By default, the framework uses fade in and fade out transition. However, it comes with several ready-to-use transitions such as slide, move, opacity, etc. Of course, you are allowed to develop your own or simply mix and match various types of transition together to create your desired transition.

Figure 10. A sample transition created using SwiftUI
Figure 10. A sample transition created using SwiftUI

Exercise #1: Using Animation and Transition to Build a Fancy Button

Now that you should have some ideas about transitions and animations, let me challenge you to build a fancy button that displays the current state of an operation.

Figure 16. A fancy button
Figure 16. A fancy button

Exercise #2: Animated View Transitions

You've learned how to implement view transitions. Try to integrate with the card view project that you built in chapter 5 and create a view transition like below. When a user taps the card, the current view will scale down and fade away. The next view will be brought to the front with a scale-up animation.

Figure 17. Animated view transition
Figure 17. Animated view transition

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 ""