SwiftUI: Create Hero Animation with MatchedGeometryEffect, SUPER CONCISE WAY

As its name MatchedGeometryEffect implies, this modifier is especially useful when you want one view to replace with another view, or one view to replace its related properties (size, height, color). You can use this to create flip animation, hero animation and transition animation.

Prepared Code

Geometry Card

I prepared a simple source code. This code contains one row with profile image and name and when user clicks the row, profile image and title starts transition.

How do I apply geometry effect?

matchedGeometryEffect

In order to use matchedGeometryEffect, you need at least two views to apply. Each view must have the identical id of your custom string. And give it a namespace. You can understand namespace as animation group.

Matched Geometry Effect is used for a smooth change between two views with the same id.

matched views

As you can see above, the two Image() with different size has the same id and namespace. It means, when views start transition, those two views will be replaced one another.

Conclusion

  1. You need at least two views to use matchedGeometryEffect
  2. matchedGeometryEffect is used for Hero, Flip, Transition. (You can use your creativity)
  3. Apply matchedGeometryEffect with id and namespace
  4. Id in matchedGeometryEffect is to correlate different views to make the views identical while animating.
  5. You can understand namespace as Animation Group.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
KD Knowledge Diet

Software Engineer, Mobile Developer living in Seoul. I hate people using difficult words. Why not using simple words? Keep It Simple Stupid!