为什么 SwiftUI 中的颜色视图似乎比图像视图褪色得更快？

Question

我有以下代码，其中 SplashScreen 的内容平滑淡出。但颜色（“app_color”）视图似乎比图像视图淡出得更快。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            TabbedView()
            SplashScreen (duration: 2.0, delay: 2.0) {
                SplashContents()
            }
        }
    }
}

struct SplashContents: View {
    var body: some View {
        ZStack {
            Color("app_color")
            Image("app_logo")
                .resizable()
                .frame(width: 200, height: 200)
        }
    }
}

public struct SplashScreen<Content: View>: View {
    
    @State private var showSplash = true
    
    let duration: Double
    let delay: Double
    let content: Content
    
    public init(duration: Double = 0, delay: Double = 0, @ViewBuilder contentProvider: () -> Content){
        self.duration = duration
        self.delay = delay
        self.content = contentProvider()
    }
    
    public var body: some View {
        content
            .edgesIgnoringSafeArea(.all)
            .opacity(showSplash ? 1 : 0)
            .zIndex(0) //push this screen to the back
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    withAnimation(.easeOut(duration: duration)) {
                            showSplash = false
                    }
                }
            }
    }
}

结果可以在随附的视频中看到。

因此，在视频中，您可以明显看到方形图像与红色背景分开，因为它们似乎以不同的速率褪色。我的问题是，如何使颜色视图以与图像视图相同的速率淡入淡出，以便图像和颜色视图看起来像是一个项目？

Answer 1

我认为并不是图像褪色速度变慢，而是它们重叠了。您可以将其视为在该图像区域中出现两次红色。

\n

将它们一起渲染的一种方法是使用修饰符compositingGroup()。

\n

ZStack {\n    Color("app_color")\n    Image("app_logo")\n        .resizable()\n        .frame(width: 200, height: 200)\n}\n.compositingGroup()\n

\n

\n

合成组使此视图\xe2\x80\x99s 祖先视图中的合成效果（例如不透明度和混合模式）在渲染此视图之前生效。

\n

\n

\n

在将效果应用于此视图之前，使用compositingGroup() 将效果应用于父视图。

\n

\n

您可以在这里找到更多信息。

\n