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, each product also has a thumbnail to show the product. Selecting a product 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. SwiftUI provides 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 this GitHub link, https://github.com/PacktPublishing/SwiftUI-Cookbook-2nd-Edition-/tree/main/Resources/Chapter08/recipe8,...