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

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

我正在努力实现的目标

我正在尝试在 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 渐变效果，但后来我意识到我只能将一个遮罩应用于 { {1}}（不是多个），所以我一直坚持使用这种方法。

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

请帮忙 想看看有没有大佬能介绍一下实现iMessage渐变背景效果的通用方法或者链接？

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

感谢您的宝贵时间！

找到解决方案

哇，这实现起来很粗略/hacky。下面是一个关于它是如何完成的 GitHub Gist。

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

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

解决方法

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

更改这两行：

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(_:) 方法，找出滚动视图偏移的变化，并移动渐变层以匹配滚动偏移。