ios - 如何在 SwiftUI 中淡化 SF 符号的顶部或底部边缘?
问题描述
我正在尝试重新创建由 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)
^^^^^^^^^^^^^^^^^
推荐阅读
- r - R工作室的直方图
- python - 如何在 Python 中写入临时文件后更改其模式
- canoe - 我可以将 CAN 日志文件播放到 V2X 设备上的 CAN 输入吗?
- google-cloud-platform - 数据目录:更新标签时出错 - 错误 400:不支持的字段掩码路径:“列”,支持的字段掩码为:字段
- powerbi - DAX:如何根据文本值分配颜色十六进制代码?
- solr - SolrCloud 重复数据删除覆盖不起作用
- google-analytics-api - 如何从新的 Google Analytics Data API (GA4) 获取 adCost?
- reactjs - expo-font 未在 react-native 中加载
- reactjs - UseEffect:无法读取属性
- android - 在单击父活动按钮以从子片段调用方法时尝试在空对象引用上调用虚拟方法