我该如何在Swift iOS中实现iMessage渐变效果？

Question

我想要实现的效果

我正在尝试在Swift iOS中实现渐变气泡效果，其中向上的聊天气泡颜色较浅，向下的聊天气泡颜色较深，并且当您滚动气泡时，可以看到渐变效果的变化。

下面的链接是iMessage渐变效果的示例图像。

iMessage渐变效果的示例图像

我所尝试过的

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

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

结果如下所示，类似于下面的Gif：

使用遮罩视图的进度示例

我最初希望为UICollectionView添加渐变，并使UICollectionViewCells遮罩渐变以实现上述iMessage渐变效果，但后来我意识到我只能将一个遮罩应用于一个UIView（而不是多个），因此我卡在了使用这种方法。

其他想法 我的另一种想法是为每个UICollectionViewCell应用一个渐变，并根据单元格的位置手动确定每个UICollectionViewCell的渐变偏移，但我的主要关注点是这不会有良好的性能。

请求帮助 我希望看到是否有人能概述一般方法或链接以实现iMessage渐变背景效果？

我知道这是一个更一般的问题，通常一般问题对于堆栈溢出来说是“坏”的问题，但我真的卡在了这个问题上，并且非常感谢任何帮助或建议来实现这种效果！

谢谢您的时间！

解决方案已找到

哇，这是一种不太正常/巧妙的实现方法。下面是如何完成的GitHub Gist。

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

它的工作原理是您将渐变设置为背景，然后对每个单独的单元格进行遮罩，从而“削减”单元格中的孔以使其透明。其他单元格的其余部分必须是白色，以模拟背景为白色。

- Josh Arnold

---

你的 CAGradientLayer 不起作用是因为你没有设置它的位置属性（[NSNumber]）。startPoint 和 endPoint 将决定渐变的方向。 - El Tomato

“locations”属性是可选的。如果您不使用它，颜色会均匀分布。 - Duncan C

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

- Duncan C