[英]How Do I Fade the Top or Bottom Edge of a SF Symbol in SwiftUI?
我正在尝试重新创建由 3 个 SF 符号组成的视觉效果。 中间的图像是 100% 实心不褪色。 我想淡化最顶部图像的顶部边缘并淡化最底部图像的底部边缘。
我正在使用 SF 符号。
我想重现以下内容:
(淡入图像顶部)
图片
图片
图片
(淡出图像底部)
我将如何做到这一点?
首先,请记住,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)
^^^^^^^^^^^^^^^^^
这是我的替代品(不使用 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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.