如何在ZStack中创建多个过渡?

时间:2019-11-11 07:54:46

标签: swift swiftui

我正在尝试在ZStack中创建多个过渡。

这是一个测试视图,其中包含一些文本和一个圆圈,它们都有各自的过渡。

struct Test: View {
    @Binding var isPresented: Bool
    @State private var showCircle: Bool = false
    @State private var showRect: Bool = false

    var body: some View {
        ZStack {
             if showRect {
                 VStack {
                     Text("Hello World")
                         .foregroundColor(.white)
                         .padding()
                 }
                 .background(Color.green)
                 .transition(.move(edge: .bottom))
            }

            if showCircle {
                Circle()
                    .fill(Color.purple)
                    .transition(.slide)
            }
        }
        .onAppear() {
            withAnimation {
                self.showRect.toggle()
                self.showCircle.toggle()
            }
        }
        .onDisappear() {
            withAnimation {
                self.showCircle.toggle()
                self.showRect.toggle()
            }
        }
    }
}

我这样添加此视图:

struct ContentView: View {
    @State private var toggler: Bool = false

    var body: some View {
        ZStack {

            if toggler {
                Test(isPresented: $toggler)
            }

            Button("Show/Hide") {
                withAnimation {
                    self.toggler.toggle()
                }
            }
        }
    }
}

过渡出现在Appear上。
但是onDisappear似乎在删除期间而不是之前被调用。

如何重置状态变量以触发删除时的转换,或应使用其他方法?

其他尝试:
我还尝试创建自定义修饰符以将它们与Anytransition.modifier一起使用-但失败了,因为我无法进行类型转换以访问State var,并且Anytransition.modifier要求修饰符符合ViewModifier。

testView内部的dismiss函数,如果我想将视图从自身中消除,则可以使用,但是当其父级将其消除时,显然不起作用。

1 个答案:

答案 0 :(得分:0)

这样做,而不是onAppear / disappear

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Toggle(isOn: $isButtonVisible.animation()) {
                Text("Show/Hide button")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }.transition(.move(edge: .trailing))
            }
        }
    }
}

或使用按钮

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.isButtonVisible.toggle()
                }
            }) {
                Text("Press me")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }.transition(.move(edge: .trailing))
            }
        }
    }
}

您还可以组合转换:检出:https://swiftwithmajid.com/2019/06/26/animations-in-swiftui/