文字不透明度渐变 [英] Text opacity gradient

问题描述

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

struct ContentView: 查看 {var主体:一些视图{ZStack {红色文本(你好世界！")//.blendMode(.luminosity)//<- 这里?.覆盖(LinearGradient(颜色:[.white.opacity(0), .white], startPoint: .leading, endPoint: .trailing).frame(宽度:50)//.blendMode(.exclusion)//<- 这里?.frame(maxWidth: .infinity, 对齐: .trailing))}}}

制作:

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

我认为这可以使用 blendMode(_:) 解决，但我不太确定.我不知道该使用哪种模式，也不知道在哪里应用它.

此问题的解决方案应该在轻巧的情况下起作用暗模式(即文本可能是黑色或白色).背后的实际背景不是恒定颜色(例如红色)，因此使用红色渐变叠加并不是我想要的.

解决方案

只需使用

I'm looking to make text to appear to fade out on the edge. Here is what I have so far:

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)
                )
        }
    }
}

Producing:

You can see the white gradient over the right side of the text. This should act like an opacity filter. Where the white isn't over, the text is fully visible. Below the white, the text should be completely transparent. It should be a gradual transition by using the gradient.

I think this can be solved using blendMode(_:), but I'm not too sure. I don't know which mode to use, nor where to apply it.

The solution to this should work in light & dark mode (i.e. the text may be black or white). The actual background behind is not a constant color (such as red) so using a red gradient overlay is not what I'm looking for.

解决方案

Just use .mask instead.

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)
            }
        }
    }
}

Result:

这篇关于文字不透明度渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！