View Animations and Blur Effect
Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of communication yet devised for quick mass appreciation.
– Walt Disney
First things first, what's an animation? How is an animation created? Animation is a simulation of motion and shape change by rapidly displaying a series of static images (or frames). It is an illusion that an object is moving or changing in size. For instance, a growing circle animation is actually created by displaying a sequence of frames. It starts with a dot. The circle in each frame is a bit larger than the one before it. This creates an illusion that the dot grows bigger and bigger. Figure 15-1 illustrates the sequence of static images. I keep the example simple so the figure displays 5 frames. To achieve a smooth transition and animation, you'd need to develop several more frames.￼
Now that you have a basic idea of how animation works, how do you create an animation in SwiftUI? Consider our growing circle example. You know the animation starts with a dot (i.e. start state) and ends with a big red circle (i.e. end state). The challenge is to generate the frames between these states. Do you need to think of an algorithm and write hundreds of lines of code to generate the series of frames in between? No, SwiftUI takes care all these heavy lifting. The framework helps you compute the frames between the start and end state resulting in a smooth animation.
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 the two states.
There is no better way to understand the technique than by working on a real example. What we are going to do in the chapter is to create a new Rate button in the detail view. When it's tapped, the app brings up a Review view for users to select the rating of the restaurant. What's more we will add a blurring effect and animations to the Review view.
To access the full version of the book, please get the full copy here. You will also be able to access the full source code of the project.