如何在 SwiftUI 中淡化 SF 符号的顶部或底部边缘？

Question

我正在尝试重新创建一个由 3 个 SF 符号组成的视觉效果。中间的图像是 100% 纯色无褪色。我想淡化最顶部图像的顶部边缘并淡化最底部图像的底部边缘。

我正在使用 SF 符号。

我想重现以下内容：

（淡入图像顶部）

图片

图片

图片

（淡出图像底部）

我将如何做到这一点？

Answer 1

这是我的替代方案（不使用 UIKit）

struct TestSFSymbolsFade: View {
    var body: some View {
        VStack {
            Image(systemName: "ant.fill").resizable()
            Image(systemName: "ant.fill").resizable()
            Image(systemName: "ant.fill").resizable()
        }
        .mask(LinearGradient(gradient: Gradient(stops: [
            .init(color: .clear, location: 0),
            .init(color: .black, location: 0.25),
            .init(color: .black, location: 0.75),
            .init(color: .clear, location: 1)
        ]), startPoint: .top, endPoint: .bottom))
        .frame(width: 40, height: 160) // < just for demo, can be any or absent
    }
}

Answer 2

首先，请记住，SF 符号有一些使用规则。可能允许也可能不允许以这种方式修改它们。特别是有一个不能用于任意目的的“原样”符号列表。但这对答案并没有太大改变。

第二要注意的是，SF Symbols 是介于文本和图像之间的奇怪野兽。它们通常表现得像文本一样，并且经常在框架之外进行绘制。这就产生了问题。您可以通过强制它们成为链接答案中讨论的真实图像来解决这个问题。

let config = UIImage.SymbolConfiguration(scale: .large)
let image = Image(uiImage: UIImage(systemName:"star.fill", withConfiguration: config)!)

最后，只要你能得到一个Image具有正确框架的，剩下的就可以工作了。它是一个SF符号并不重要。

Asperi 的回答解释了如何使用resizable.

let image = Image(systemName: "star.fill").resizable().aspectRatio(contentMode: .fit)

（我已经添加了，aspectRatio所以它不会扭曲。）

首先，定义您的渐变。这就是淡入淡出的工作方式，您可以使用一组颜色或单独的色标对其进行配置。这里唯一重要的是不透明度。

let fade =  Gradient(colors: [Color.clear, Color.black])

（有关使用停止的示例，请参阅 Asperi 的回答，它可以让您更好地控制淡入淡出。）

有了这个，您可以将此渐变应用为蒙版：

let fade =  Gradient(colors: [Color.clear, Color.black])
let image = Image(systemName: "star.fill")
    .resizable().aspectRatio(contentMode: .fit).frame(height: 48)

struct ContentView: View {
    var body: some View {
        VStack {
            image
                .mask(LinearGradient(gradient: fade, startPoint: .top, endPoint: .bottom))
            image
            image
                .mask(LinearGradient(gradient: fade, startPoint: .bottom, endPoint: .top))
        }
    }
}

这引发了关于尺寸的问题。这种方法是一个灵活的堆栈。它会增长以填充它放入的任何容器。您可能需要通过几种方式来限制它。

首先，您可以通过在其上放置一个框架来决定整个堆栈的高度：

    VStack {
        image
            .mask(LinearGradient(gradient: fade, startPoint: .top, endPoint: .bottom))
        image
        image
            .mask(LinearGradient(gradient: fade, startPoint: .bottom, endPoint: .top))
    }.frame(height: 128)
     ^^^^^^^^^^^^^^^^^^^

或者您可以修复每个图像的大小：

let image = Image(systemName: "star.fill")
    .resizable().aspectRatio(contentMode: .fit).frame(width: 48)
                                               ^^^^^^^^^^^^^^^^^