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

Question

我想要实现的目标

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

下面的link是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渐变效果，后来发现只能给一个遮罩a UIView（不是多个），所以我坚持使用这种方法。

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

请帮忙 想看看有没有大神能给个大概的方法或者link如何实现iMessage渐变背景效果？

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

感谢您的宝贵时间！

找到解决方案

哇，这是要实施的 sketchy/hacky。下面是一个 GitHub 如何完成的要点。

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

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

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)

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

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

How can I implement the iMessage gradient in Swift iOS?

chat

uikit

ios

imessage

swift

找到解决方案