如何为视图生命周期事件（onAppear、onDisappear）制作可重用的修饰符？

Question

我有一个常见的fadeIn和fadeOut animation，用于视图出现和消失时：

struct ActiveView: View {
    @State var showCode: Bool = false
    @State var opacity = 0.0
    var body: some View {

    if self.showCode {
        Color.black.opacity(0.7)
            .onAppear{
                let animation = Animation.easeIn(duration: 0.5)
                    return withAnimation(animation) {
                        self.opacity = 1
                    }
            }
            .onDisappear{
                let animation = Animation.easeOut(duration: 0.5)
                    return withAnimation(animation) {
                        self.opacity = 0
                    }
            }
    }
    }
}

但是，我想在其他视图上使用这些相同的动画，所以我希望它简单且可重用，如下所示：

if self.showCode {
    Color.black.opacity(0.7)
        .fadeAnimation()
}

我怎样才能做到这一点？

编辑：

尝试实现视图扩展：

extension View {
    func fadeAnimation(opacity: Binding<Double>) -> some View {
        self.onAppear{
            let animation = Animation.easeIn(duration: 0.5)
                return withAnimation(animation) {
                    opacity = 1
                }
        }
        .onDisappear{
            let animation = Animation.easeOut(duration: 0.5)
                return withAnimation(animation) {
                    opacity = 0
                }
        }
    }
}

Answer 1

您尝试做的已经存在并命名为opacity transition ，它是用一个修饰符编写的。

这是一个演示：

struct ActiveView: View {
    @State var showCode: Bool = false
    var body: some View {
        ZStack {
            if self.showCode {
                Color.black.opacity(0.7)
                    .transition(AnyTransition.opacity.animation(.default))
            }
            Button("Demo") { self.showCode.toggle() }
        }.frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Answer 2

您尝试实现的功能已经是 Animation 和 SwiftUI 中的 Transition 修饰符的一部分。

因此，您可以将.transition修饰符添加到您的任何Views中，它将为其插入和删除设置动画。

if self.showCode {
    Color.black.opacity(0.7)
        .transition(AnyTransition.opacity.animation(.easeInOut(duration: 0.5)))
}

您可以使用多种不同的过渡，例如.slide 、 .scale 、 .offset等。有关过渡的更多信息请点击此处。

您甚至可以使用不同的插入和删除操作创建自定义转换。 在您的情况下，不同的 animation 曲线。

extension AnyTransition {
    static var fadeTransition: AnyTransition {
        .asymmetric(
            insertion: AnyTransition.opacity.animation(.easeIn(duration: 0.5)),
            removal: AnyTransition.opacity.animation(.easeOut(duration: 0.5))
        )
    }
}

并像这样使用它：

if self.showCode {
    Color.black.opacity(0.7)
        .transition(.fadeTransition)
}

希望这可以帮助 ！