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

Question

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

我正在使用 SF 符号。

我想重现以下内容：

（淡入图像顶部）

图片

图片

图片

（淡出图像底部）

我将如何做到这一点？

Answer 1

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

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

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

最后，只要你能得到一个Image正确的框架，剩下的就可以了。它是 SF Symbol 没关系。

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

Answer 2

这是我的替代品（不使用 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
    }
}