如何在 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
    }
}

備份