如何在 Swift iOS 中实现 iMessage 渐变？

Posted 2023-03-14

【中文标题】如何在 Swift iOS 中实现 iMessage 渐变？

【英文标题】：How can I implement the iMessage gradient in Swift iOS?

【发布时间】：2020-12-24 23:40:30

【问题描述】：

我正在努力实现的目标

我正在尝试在 Swift ios 中实现渐变气泡效果，其中顶部的聊天气泡颜色较浅，底部的聊天气泡颜色较深，当您滚动气泡时，您会看到渐变变化.

以下链接是 iMessage 渐变效果的示例。

An example image of the iMessage gradients

我的尝试

我创建了一个视图并添加了一个渐变层：

let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 1, y: 0)
gradient.endPoint = CGPoint(x: 0, y: 1)
gradient.colors = [UIColor.systemBlue.cgColor, UIColor.systemPink.cgColor]
gradient.frame = UIScreen.main.bounds

view.layer.addSublayer(gradient)
view.backgroundColor = .yellow

我创建了一个视图并将其用作蒙版

mask.backgroundColor = .yellow
mask.alpha = 1
mask.frame.size = CGSize(width: 100, height: 100)
mask.center = view.center
view.mask = mask

结果如下图所示：

Example of my progress using a Mask View

我原本希望在UICollectionView 上添加一个渐变并让UICollectionViewCells 对渐变进行蒙版以实现上述iMessage 渐变效果，但后来我意识到我只能将一个蒙版应用于UIView（不是多个），所以我坚持使用这种方法。

其他想法 我的其他想法是对每个UICollectionViewCell 应用渐变，并根据单元格的位置手动确定每个UICollectionViewCell 的渐变偏移，但是，我主要担心这不会有好的性能。

请帮忙 我希望看看是否有人可以概述一个通用方法或链接到如何实现 iMessage 渐变背景效果？

我知道这是一个更笼统的问题，而且通常笼统的问题是堆栈溢出的“坏”问题，但我真的被困在这个问题上，非常感谢任何帮助或建议来实现这个效果！

感谢您的宝贵时间！

解决办法

哇，这实现起来很粗略/hacky。以下是其完成方式的 GitHub Gist。

https://gist.github.com/josharnoldjosh/e04d41f10de6ab378da931ab11370d11

它的工作方式是为渐变设置背景，然后遮盖每个单独的单元格，“切出”单元格中的一个洞以使其透明。单元格的其余部分必须为白色以模拟背景为白色。

【问题讨论】：

您的CAGradientLayer 不起作用，因为您没有为其设置位置属性 ([NSNumber])。 startPoint 和 endPoint 将决定渐变的布局方向。

locations 属性是可选的。如果你不使用它，颜色会均匀分布。

【参考方案1】：

这有多个部分。首先，您需要设置一个从上到下的渐变。您当前的渐变从右上角到左下角。

改变这两行：

gradient.startPoint = CGPoint(x: 1, y: 0)
gradient.endPoint = CGPoint(x: 0, y: 1)

到

gradient.startPoint = CGPoint(x: 0.5, y: 0)
gradient.endPoint = CGPoint(x: 0.5, y: 1)

接下来的问题是当您滚动表格视图/集合视图时，如何使视图呈现与屏幕相关的渐变颜色。这并不容易，我不确定你会怎么做。我可能必须将代码附加到表格视图/集合视图的 UIScrollViewDelegate 并实现 scrollViewDidScroll(_:) 方法，找出滚动视图偏移的变化，并移动渐变层以匹配滚动偏移。