文本不透明度渐变

Question

我希望使文本看起来在边缘淡出。这是我目前所拥有的：

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.red

            Text("Hello world!")
//                .blendMode(.luminosity) // <- Here?
                .overlay(
                    LinearGradient(colors: [.white.opacity(0), .white], startPoint: .leading, endPoint: .trailing)
                        .frame(width: 50)
//                        .blendMode(.exclusion) // <- Here?
                        .frame(maxWidth: .infinity, alignment: .trailing)
                )
        }
    }
}

制作中：

您可以在文本右侧看到白色渐变。这应该像一个不透明过滤器。在白色未结束的地方，文本完全可见。白色下方的文字应该是完全透明的。应该是用渐变渐变的过渡。

我认为这可以使用 blendMode(_:) 解决，但我不太确定。不知道用什么模式，也不知道应用到什么地方

这个问题的解决方案应该在明暗模式下工作（即文本可能是黑色或白色）。后面的实际背景不是固定颜色（例如红色），所以使用红色渐变叠加不是我想要的。

Answer 1

只需使用 .mask 即可。

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.red
            
            Text("Hello world!")
            
            /// for iOS 14 and below, replace { } with ( )
            .mask {
                ///                             no need for .opacity, just use .clear
                LinearGradient(colors: [.white, .clear], startPoint: .leading, endPoint: .trailing)
            }
        }
    }
}

结果：

Answer 2

多亏了，现在可以使用了。

我要添加的只是一件小事，以展示获得与问题中完全相同结果的方法（因为mask有点颠倒了它） :

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.red

            Text("Hello world!")
                .mask(
                    HStack(spacing: 0) {
                        Color.white

                        LinearGradient(colors: [.white, .clear], startPoint: .leading, endPoint: .trailing)
                            .frame(width: 50)
                    }
                )
        }
    }
}

结果：

文本不透明度渐变

Text opacity gradient

swift

swiftui

blending