SwiftUI Transition + LinearGradient + Opacity 奇怪的行为

Question

我正在尝试使用简单的线性渐变为Text视图的出现/消失设置不透明度动画。

这是我现在拥有的“最小”代码：

import SwiftUI

struct ContentView: View {
    @State var shown: Bool = true

    var body: some View {
        VStack {
            ZStack {
                if shown {
                    TextView()
                }
            }
            .frame(height: 100)

            Button("Show Toggle") {
                shown.toggle()
            }
        }
    }
}

struct TextView: View {
    var body: some View {
        text
            .overlay(gradient)
            .mask(text)
            .transition(transition)
    }
    
    var gradient: LinearGradient {
        LinearGradient(
            colors: [Color.white, Color.blue],
            startPoint: .leading, endPoint: .trailing
        )
    }
    
    var transition: AnyTransition {
        .asymmetric(
            insertion: .opacity.animation(.linear(duration: 0.500)),
            removal: .opacity.animation(.linear(duration: 0.500))
        )
    }

    var text: some View {
        Text("Hello World")
            .fontWeight(.bold)
            .font(.largeTitle)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

注意：我使用view.overlay(gradient).mask(view)模式是为了让渐变视图不贪心。

结果，animation 看起来像这样：

请注意视图如何不“只是”淡出——它首先变黑然后淡出。

我可以通过只做gradient.mask(text)而不是其他模式来解决不透明度问题，但后来我遇到了其他问题，渐变视图是贪婪的

Answer 1

您正在绘制黑色文本，然后覆盖渐变，然后用文本剪裁它。 只需省略第一个黑色文本，例如将其不透明度设置为 0。

        text.opacity(0)
            .overlay(gradient)
            .mask(text)
            .transition(transition)

或使用.drawingGroup在显示之前将整个视图渲染到屏幕外：

        text
            .overlay(gradient)
            .mask(text)
            .drawingGroup() // here
            .transition(transition)