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

Question

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

我正在使用 SF Symbols。

我想重现以下内容:

(淡化图像顶部)

图片

图片

图片

(淡化图像底部)

我将如何完成这个？

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