effect.swift

//
//  ContentView.swift
//  HonkHonk
//
//  Created by Thomas Ricouard on 23/12/2020.
//

import SwiftUI


struct ContentView: View {
    @State private var selectedIndex: Int?
    @Namespace private var namespace
    
    var body: some View {
        if let index = selectedIndex {
            VStack {
                Button(action: {
                    withAnimation(.easeInOut) {
                        selectedIndex = nil
                    }
                }, label: {
                    Text("Back")
                        .padding(5)
                        .foregroundColor(.red)
                        .border(Color.red, width: 1)
                })
                .padding(.vertical, 16)
                .transition(.scale)
                
                Spacer()
                RoundedRectangle(cornerRadius: 25.0)
                    .frame(width: 100, height: 100)
                    .foregroundColor(.gray)
                    .matchedGeometryEffect(id: "avatar\(index)",
                                           in: namespace)
                Text("Name")
                    .font(.title)
                    .fontWeight(.bold)
                    .matchedGeometryEffect(id: "name\(index)",
                                           in: namespace)
                Text("@Username")
                    .matchedGeometryEffect(id: "username\(index)",
                                           in: namespace)
                Spacer()
            }
        } else {
            ForEach(1...5, id: \.self) { index in
                HStack {
                    VStack(alignment: .leading) {
                        HStack(alignment: .center) {
                            RoundedRectangle(cornerRadius: 25.0)
                                .frame(width: 100, height: 100)
                                .foregroundColor(.gray)
                                .matchedGeometryEffect(id: "avatar\(index)",
                                                       in: namespace)
                            VStack {
                                Text("Name")
                                    .font(.title)
                                    .fontWeight(.bold)
                                    .matchedGeometryEffect(id: "name\(index)",
                                                           in: namespace)
                                Text("@Username")
                                    .matchedGeometryEffect(id: "username\(index)",
                                                           in: namespace)
                                
                            }
                        }
                    }
                    
                    Spacer()
                }
                .padding()
                .onTapGesture {
                    withAnimation(.easeInOut) {
                        selectedIndex = index
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}