Creating a hero view transition with .matchedGeometryEffect

Do you know what a hero transition is? If you don't know the term, you have still probably seen it many times.

Maybe in an e-commerce app, where with a list of products where each product has a thumbnail to show the product, selecting an item flies it to a details page, with a big image of the same product. The smooth animation from the thumbnail to the big image is called a "hero transition."

Another example is the cover image animation in the Apple Music player, transitioning from the mini-player to the full-player.

In iOS 14, SwiftUI introduced a modifier, .matchedGeometryEffect, which makes it very easy to implement this kind of animation almost without any effort.

Getting ready

This recipe uses a few images courtesy of Pixabay (https://pixabay.com/).

You can find the images in the GitHub repo at https://github.com/PacktPublishing/SwiftUI-Cookbook/tree/master/Resources/Chapter07/recipe8...