Skip to content

Instantly share code, notes, and snippets.

@Dimillian

Dimillian/effect.swift

Created December 23, 2020 09:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Dimillian/ae3b9ccc2d9511feadbbcb8595d68c32 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Dimillian/ae3b9ccc2d9511feadbbcb8595d68c32 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Dimillian created this gist Dec 23, 2020.
    88 changes: 88 additions & 0 deletions effect.swift
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    //
    // 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()
    }
    }