Check Mobile App
Read now
Start a Project

Basic of SwiftUI Animation And MatchedGeometryEffect

Save

SwiftUI Animation:

SwiftUI provides two types of animations: implicit and explicit. Both approaches allow you to animate views and view transitions. implicit animations are animations that you specify using the .animation() modifier. This method is used on bindings, and it asks SwiftUI to animate any changes that result in the binding’s value being modified.

Explicity animations offer a more finite control over the animations you want to present. Instead of attaching a modifier to the view, you tell SwiftUI what state changes you want to animate inside the withAnimation() block.

Implicit Animation:

Let’s create a new project SwiftUIAnimation.

Take a look at the figure above. It’s a simple tappable view that is composed of a green circle and a rectangle. When a user taps the square or circle, the circle’s colour will be changed to blue and the rectangle’s colour to red. At the same time, the size of the rectangle icon grows bigger. So, we have various state changes here:

  1. The colour of the circle changes from red to blue.
  2. The colour of the rectangle icon changes from blue to red.

The rectangle icon doubles its original size.

 

 

Explicit Animations:

Let’s see how we can achieve the same result using explicit animation.

Synchronizing views with MatchedGeometryEffect:

This is useful if you want to animate a view’s transition to a different part of the same view hierarchy :-

for example, going from a list view to a zoomed detail view – then you should use SwiftUI’s matchedGeometryEffect() modifier, which is a bit like Magic Move in Keynote.

To use the modifier, attach it to a pair of views that are the same, in different parts of your hierarchy. With that done, when you switch between your two view states you’ll find SwiftUI smoothly animates your synchronized view.

Let’s look at a simple example of matchedGeometry in action:

 

For other blogs Please click here

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

Great Product, Great Team, and Great Support Service. And if you want to add more features to the product, they can submit any idea that comes to your mind. They really care about their clients and we are really happy and honored to deal with Webkul.

Osama
Talk to Sales

Global

Live Chat
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home