SwiftUI | Some examples of modern animations with demo cafe app

Photo by TR on Unsplash

This time I brought an example project using and to implement some fascinating animations. I will show you a simple cafe app which introduces their products.

Let’s peek into a final view.

What are we going to use?

As I mentioned briefly before, two key functions we are going to use are and . makes hero animation available in SwiftUI and is used to delay the start of the animation. By mixing those, we will be able to make what we intended.

1. matchedGeometryEffect

Actually, isn’t difficult. All we have to consider is just matching and between the objects we want to animate. However, even it doesn’t seem that tricky, there are a few things you should take care of .

First, you have to check the order of modifiers. When goes below of some modifiers, especially the , it won’t act as you expected like this case.

Second, you should make sure you are not using duplicate s. That’s why I made my struct and gave them an unique ID. If you are using same ID everywhere, it will occur unexpected behavior.

To add some detail explanations about the codes, if you want to share your with other views, just add like I did in line 76. Also, there’s a problem that if I used statement, the position of is initiated. So I used rather than .

So far, we have created a transition animation between product and detail view using . Now, let’s add more animations that help to make our views more sophisticated.

2. DispatchQueue

The omitted part is same with the above codes.

You may be familiar with . The role of and two variables(, ) is helping us to run animations with different delays. You can adjust those delays easily by changing the in and run more animations by adding more & variable pairs.

3. matchedGeometryEffect again

It’s again. I simply added , conditional statements and . That’s all.

4. Add some details

It’s over!

Difficult things are over. All that’s left is to do this and that for good looking such as and . Then will be able to build an app I introduced at the beginning of this post. I think you guys can understand even I don’t explain it. I will attach the full codes below. Please take a look to check what I did. Thank you for reading!

I can make your dream come true / Mainly Interested in iOS and also in Flutter, Python