SwiftUI 改变过渡颜色

Question

我认为这是我在尝试在 SwiftUI 中实现某种效果时提出的第三个问题。基本上，我试图为单击按钮后从屏幕底部向上滑动的菜单制作动画。此效果有一些技术细节：

“向上滑动”部分需要动画，向上滑动的视图内的任何子视图不应在动画中间呈现，从而导致体验不稳定。看到这个问题
“上滑”视图需为白色圆角矩形。（它将有文本子视图）
为了增加对比度，上滑视图向上滑动时需要将之前占据屏幕的视图变暗。这也需要动画。

这里是一些实现 1) 但在 2) 和 3) 失败的示例代码。它在 2) 处失败，因为向上滑动视图由于某种原因被空格括起来，所以白色圆角矩形没有与其他变暗视图形成对比。它在 3) 处失败，因为我还没有找到动画颜色变化的方法。

示例代码：

struct ContentView: View {
    @State var show: Bool = Bool()
    
    var body: some View {
        VStack {
            Button(action: { show.toggle() }, label: { show ? Text("hide") : Text("show") })
                .animation(nil)
            Spacer()
            Other(show: show)
                .brightness(show ? -0.1: 0)
                
            Spacer()
            Group {
                if show { CollapsibleView().transition(.move(edge: .bottom)) }
            }
            .opacity(show ? 1.0 : 0.0)
        }

        .animation(.linear(duration: 0.2))
    }
}
struct Other: View {
    var show: Bool
    var body: some View {
        ZStack {
            Color.white
                .brightness(show ? -0.1: 0)
        }
    }
}
struct CollapsibleView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 40)
            .frame(height: 100)
            .foregroundColor(.blue)
    }
}

请注意，这里的圆角矩形是蓝色的，以显示随机空白之间的对比。

Answer 1

您可以尝试使用偏移代替过渡以获得更好的动画效果：

struct ContentView: View {
    
    @State private var show: Bool = Bool()

    var body: some View {
        
        VStack {
            
            Button(action: { show.toggle() }, label: { show ? Text("hide") : Text("show") })

            Spacer()
            
            CollapsibleView(show: show)

        }
        
    }
}

struct CollapsibleView: View {
    
    let show: Bool
    
    var body: some View {

        RoundedRectangle(cornerRadius: 40)
            .frame(height: 100)
            .foregroundColor(.blue)
            .padding(.horizontal)
            .offset(y: show ? .zero : 200.0)
            .animation(.default, value: show)
 
    }
}

SwiftUI 改变过渡颜色

SwiftUI change transition color

animation

colors

button

swiftui