将淡入淡出效果应用于UICollectionView的顶部和底部

Question

我已经在这里阅读了一些例子，但我不能按照我想要的方式去做，不知怎的，我的渐变示例卡在屏幕中间，没有按预期工作。

我有一个UICollectionView，用垂直滚动填充整个屏幕。

我希望UICollectionView的顶部和底部为黑色，中间部分为透明（因为我使用黑色blackgroundColor）。

我试图应用渐变，但不知怎的，我没能完成我想要的。

这是我的代码：

let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [UIColor.black.cgColor, UIColor.clear.cgColor, UIColor.black.cgColor]
gradient.startPoint = CGPoint(x: 1, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)
view.layer.mask = gradient

上面的代码是将渐变放在屏幕中间但反转。它在屏幕的顶部和底部是透明的，如果褪色到完全黑色则在中间部分。

我试图创造这样的东西：

感谢您的帮助

Answer 1

您可以通过以下方式更改颜色线来实现：

gradient.colors = [
    UIColor(white: 1.0, alpha: 0).cgColor,
    UIColor(white: 1.0, alpha: 1).cgColor,
    UIColor(white: 1.0, alpha: 0).cgColor
]

或者，如果您想要更好地控制渐变，您还可以使用下面的代码并使用位置和/或颜色alpha值：

let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [
    UIColor(white: 1, alpha: 0).cgColor,
    UIColor(white: 1, alpha: 1).cgColor,
    UIColor(white: 1, alpha: 1).cgColor,
    UIColor(white: 1, alpha: 0).cgColor
]
gradient.locations = [0, 0.4, 0.6, 1]
view.layer.mask = gradient

文档中的原因;

  

一个可选图层，其Alpha通道用于屏蔽图层的内容。

     

图层的Alpha通道决定了图层内容和背景的显示量。完全或部分不透明的像素允许底层内容显示但完全透明的像素阻止该内容。