Expand Swiftui view to cover screen

224 views Asked by At

Hello I'm looking to replicate a swiftui animation that I see around specifically to animate a view (like a button) from where it is in the hierarchy to full screen and then back.

Here is a demo https://i.stack.imgur.com/WmDfn.jpg

What I've tried I don't have a lot to go on with this. I basically tried manipulating frame dimensions with gesture inputs, but this breaks down pretty quickly once you have anything else on the screen.

the below works with a single element and nothing else ‍♀️.

struct Expand: View {
    @State private var dimy = CGFloat(100)
    @State private var dimx = CGFloat(100)
    @State private var zz = 0.0
    @State private var offset = CGFloat(0)
    
    let w = UIScreen.main.bounds.size.width
    let h = UIScreen.main.bounds.size.height
    
    
    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Image(systemName: "play")
                    .foregroundColor(Color.red)
                    
                    .frame(width: dimx, height: dimy)
                    .background(Color.red.opacity(0.5))
                    .border(Color.red)
                    .offset(y: offset)
                    .gesture(DragGesture()
                                .onChanged { gesture in
                                    let y = gesture.translation.height
                                    offset = y
                                }
                                .onEnded { _ in
                                    offset = 0
                                    dimx = dimx == 100 ? UIScreen.main.bounds.size.width : 100
                                    dimy = dimy == 100 ? UIScreen.main.bounds.size.height : 100
                                    zz = zz == 0 ? 3 : 0
                                }
                    )
                    .animation(.default)
                    .position(x: w / 2, y: h / 2)
                    .zIndex(zz)
            }
        }
        .edgesIgnoringSafeArea(.vertical)
    }
}
0

There are 0 answers