如何在SwiftUI中使用动画编译或链式动画?

时间:2020-11-08 07:46:25

标签: swiftui

我有一个Rectangle,它通过2个按钮或2个移动(move1和move2)的动作开始从A点移动到中间,然后从中间移动到B,

我需要阅读动画move1的末尾以启动move2,在UIKit中我们可以使用动画编译,我想在SwiftUI中使用或访问相同的可能性。

我的目标:以链模式将这2个动画矩形化,首先是链移动1,然后是链移动2。

PS:我了解DispatchQueue,我更喜欢使用链动画!

    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 个答案:

没有答案