Basic Animations and Transitions
Have you ever used the magic move animation in Keynote? With magic move, you can easily create slick animation 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 these two states.
SwiftUI empowers you to animate changes for individual views and transitions between views. The framework already 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, you need to work on a few demo projects and learn the programming technique 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.
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.
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.
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.
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.
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.
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.
To access the full content and the complete source code, please get your copy at https://www.appcoda.com/swiftui.