How can i get the spring() animation right

user_18366396 0
Viewed 123

On button click i want my MapScreen to "slide" in from the bottom. So i used .annimation(spring()). This used to work, now i get the animation deprecation (needs an value). How can i solve this on the spring() animation.

Is it possible to set a WithAnimation on the if showMapScreen toggle ?

struct ContentView: View {
    
    
    @State private var showMapScreen = false

    
    var body: some View {

        
        ZStack {
            Color.white
                .ignoresSafeArea()
        
            VStack {
                Button("Show Map") {
                        
                        showMapScreen.toggle()
                    
            
                   
                       }
                }
        

                if showMapScreen {
                    
                    MapScreen()
                        .padding(.top, 400)
                        .transition(.move(edge: .bottom))
                        .animation(spring(), value:???)
       
                  
                }

        }
    }
}

//second view

  struct MapScreen: View {
    
        @State private var mapRegion = MKCoordinateRegion(center: 
         CLLocationCoordinate2D(latitude: 51.5, longitude: -0.12), span: 
         MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2))
    

    
    var body: some View{
                
        ZStack(alignment:.top) {
         
            Color.white
     
                    //handle for dragging
                    Capsule()
                        .frame(width:40, height:10)
                        .zIndex(2.0)
                        
                    Map(coordinateRegion: $mapRegion)
    
                
        }  
            .cornerRadius(30)
            .edgesIgnoringSafeArea(.bottom)
          

    }
   

}
swiftui
2 Answers

Move it into container and put animation to container allowing to animate its content, like

VStack {
    if showMapScreen {
        MapScreen()
            .padding(.top, 400)
            .transition(.move(edge: .bottom))
    }
}
.animation(spring(), value: showMapScreen)   // << here !!
user_122990300

To use the method animation(_:value:), you must pass the parameter 'value'.
With it, we specify the property, the change of which will trigger the animation.

MapScreen()
           .padding(.top, 400)
           .transition(.move(edge: .bottom))
           .animation(spring(), value: showMapScreen)

From Apple Docs:

value
A value to monitor for changes.

user_57014440
Related