En este artículo vamos a aprender a crear una HERO Transition como las que podemos ver en el AppStore utilizando SwiftUI y el matchGeometryEffect modifier.
¿Qué es matchedGeometryEffect modifier?
Es un nuevo modificador de vista (view modifier) introducido en iOS 14 que nos permite sincronizar el tamaño y la posición de varias vistas de SwiftUI y crear animaciones muy chulas.
Tiene dos casos de uso principales:
- Animar el tamaño y la posición de dos vistas en la que una se está añadiendo a la jerarquía de vistas y la otra se está eliminando.
- También se puede utilizar para animar el tamaño y la posición de varias vistas que pertenecen simultáneamente a la misma jerarquía de vistas. Este segundo caso de uso es algo más complicado y para desarrollarlo correctamente, tendríamos que utilizar el parámetro
isSourcee indicar cuál es la vista que se debe utilizar como origen.
En este artículo lo que haremos será crear una animación en la que uno de los elementos está siendo añadido (la vista de detalle) y el otro elemento está siendo eliminado (el item de la lista), así que por ahora no necesitaremos utilizar el parámetro isSource.
El proyecto: una lista que navega al detalle con una HERO animation
Como el tema de las animaciones es algo muy visual, he pensado que la mejor manera de explicártelo es mediante un video.
Si te resulta útil y quieres ayudarme, comparte el post en tus redes y subscríbete al canal de YouTube 😃