Springy Photo Zoom Using Geometry Matching

SpringyPhotoZoom.swift

//
//  ContentView.swift
//  photo_zoom
//
//  Created by Amos Gyamfi on 8.8.2020.
//Create Smooth Transitions with Geometry Matching

import SwiftUI

struct ContentView: View {
@State private var unZoom = true
@Namespace private var morphSeamlessly
    
    var body: some View {
        ZStack {
            
            if unZoom { // Show profile
                HStack {
                    Image("profile")
                        .matchedGeometryEffect(id: "morph", in: morphSeamlessly)
                        
                    VStack(alignment: .leading) {
                        Text("Netta")
                            
                        Text("Content Strategist")
                            .foregroundColor(.secondary)
                        HStack {
                            Image(systemName: "mappin.and.ellipse")
                            Text("Mississauga ON")
                                .font(.caption)
                        }
                    }
                }.offset(x: -70, y: -350)
            }
            
            else{  // Show zoomed
                VStack(alignment: .leading) {
                    Image(systemName: "xmark")
                        .font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)
                    
                    Spacer()
                    
                    Image("zoomed")
                        .resizable()
                        .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/).frame(width: 300, height: 300, alignment: .center)
                        .aspectRatio(contentMode: .fill)
                        .scaleEffect(unZoom ? 0 : 1.2, anchor: .center)
                        .matchedGeometryEffect(id: "morph", in: morphSeamlessly)
                        .offset(x: unZoom ? -150 : 0, y: unZoom ? -300 : 0)
                    
                    Spacer()
                }.padding()
            }
            
        }
        .onTapGesture(count: 1, perform: {
            withAnimation(
                Animation.interpolatingSpring(stiffness: 170, damping: 15)
            ){
                unZoom.toggle()
            }
        })
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(/*@START_MENU_TOKEN@*/.dark/*@END_MENU_TOKEN@*/)
    }
}