How I can use animation compilation or chain animation in SwiftUI?

Viewed 240

I have a Rectangle which start moving from point A to middle and then from middle to B with action of 2 Buttons or 2 moves(move1 and move2),

I need to read the end of animation move1 to start move2, in UIKit we could use animation compilation, I want use or access the same possibility in SwiftUI.

My Goal: Rectangle animate those 2 animation in chain mode, first chain move1 and then second chain move2.

PS: I know about DispatchQueue, I prefer to use chain animation!

    struct ContentView: View {
    
    @State var move1: Bool = false
    @State var move2: Bool = false
    
    
    var body: some View {
        
        ZStack
        {
            
            VStack
            {
                VStack
                {
                    Rectangle().fill(Color.green).frame(width: 200, height: 200, alignment: .center)
                        .cornerRadius((move1 == false && move2 == false) ? 0 : ((move1 == true && move2 == true) ? 0 : 50))
                }
                .offset(y: move1 ? (UIScreen.main.bounds.height-200)/2 : 0)
                .offset(y: (move1 == true && move2 == true) ? (UIScreen.main.bounds.height-200)/2 : 0)
                .animation( Animation.easeInOut(duration: 1) )
                
                Spacer()
            }
            .ignoresSafeArea()
            
            
            
            
            VStack
            {
                
                Image(systemName: "a.circle").font(Font.title.bold()).offset(y: 100)
                
                Spacer()

                HStack
                {
                    Spacer()
                    
                    Button("Move1") { move1.toggle()}.font(Font.title.bold()).padding().overlay(RoundedRectangle(cornerRadius: 20).stroke(Color.purple, lineWidth: 2))

                    Spacer()
                    
                    Button("Move2") { move2.toggle()}.font(Font.title.bold()).padding().overlay(RoundedRectangle(cornerRadius: 20).stroke(Color.purple, lineWidth: 2))
                    
                    Spacer()
                }
                
                Spacer()
                
                Image(systemName: "b.circle").font(Font.title.bold()).offset(y: -100)
            }
            .ignoresSafeArea()
            
            
            
        }
        
        
        
    }
}

enter image description here

0 Answers
Related