HomeiOS Developmentios - How can I make a view with animation like a...

ios – How can I make a view with animation like a sheet with Materials background

By Yalini

July 22, 2022

218

[ad_1]

ios – How can I make a view with animation like a sheet with Materials background – Stack Overflow

Requested
in the present day

Seen
14 occasions

SwiftUI 4.0: Xcode 13.x + 14beta

Howto create a view with the same animation impact like a sheet, however absolutely modifiable?

*.Materials background > iOS15

An answer with background and animation Effekt and “out of the field” SwiftUI.
Fullcode n GitHub

requested 36 minutes in the past

Create a View with personal background design.
With .opacity(0.5) the blur impact is just a little bit lighter.
On faucet gesture ( two clicks ) on the highest rectangle open and shut the view.

ZStack(alignment: .middle) {
                Rectangle()
                    .opacity(0.5)
                    .background(.ultraThinMaterial)
                    .cornerRadius(30)
                VStack {
                    HStack {
                        RoundedRectangle(cornerRadius: 5)
                            .body(width: 50, peak: 5)
                            .foregroundColor(Colour(uiColor: .lightGray))
                        
                    }
                    .body(width: UIScreen.principal.bounds.width, peak: 55)
                    .onTapGesture(rely: 2, carry out: {
                        withAnimation {
                            offset.peak = offset == .zero ? 230 : 0
                            
                        }
                    })
                    
                    Spacer()
                    
                }
                VStack {
                    imageProperties
                }
                
            }

Set modifier for dimension and shifting animation (offset is up to date as State variable )

.body(width:  UIScreen.principal.bounds.width)
            .body(peak: UIScreen.principal.bounds.peak / 3)
            .offset(offset)
            .gesture(DragGesture()
                .onChanged { worth in
                    withAnimation(.spring()) {
                        if offset.peak > worth.translation.peak && worth.translation.peak < 50 {
                            offset = .zero
                            return
                        }
                        if worth.translation.peak > 180 {
                            offset.peak = 230
                            return
                        }
                        offset.peak = worth.translation.peak
                    }
                }
                .onEnded({ _ in
                    withAnimation(.spring()) {
                        if offset.peak < 100 { offset = .zero
                        } else {
                            offset.peak = UIScreen.principal.bounds.peak / 3 - 50
                        }
                    }
                })
            )
        }.ignoresSafeArea()