[英]Apply both horizontal & vertical CAGradientLayer Mask to UIScrollView/UICollectionView
我有一个既可以在X轴又可以在Y轴上滚动的UICollectionView,并且我想通过向具有可滚动内容的任何方向添加一些淡入淡出效果来应用很酷的UI效果。 假设,该页面可以同时显示所有四个带有淡入淡出的边缘,或者根据情况完全不显示。
我目前已经实现了一个CAGradientLayer,它可以向页面的顶部或底部(垂直/ y轴)添加透明性,但是我不知道如何添加第二个透明性,以实现额外的左右淡入淡出。
@IBOutlet var collectionView: UICollectionView!
let fadeOffset: CGFloat = 10
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if self.collectionView.layer.mask == nil {
let maskLayer = CAGradientLayer()
maskLayer.locations =
[
NSNumber(value: 0.0),
NSNumber(value: 0.2),
NSNumber(value: 0.8),
NSNumber(value: 1.0)
]
let bounds = CGRect(origin: CGPoint.zero,
size: self.collectionView.frame.size)
maskLayer.bounds = bounds
maskLayer.anchorPoint = CGPoint.zero
self.collectionView.layer.mask = maskLayer
}
self.scrollViewDidScroll(self.collectionView)
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView == self.collectionView {
let outerColor = UIColor(white: 1, alpha: 0).cgColor
let innerColor = UIColor(white: 1, alpha: 1).cgColor
var colors: [CGColor] = []
let x = scrollView.contentOffset.x
let y = scrollView.contentOffset.y
// CALCULATE TOP FADE
colors += [y + scrollView.contentInset.top <= self.fadeOffset ?
innerColor : outerColor]
colors += [innerColor]
// CALCULATE BOTTOM FADE
colors += [innerColor]
colors += [y + scrollView.frame.height >= scrollView.contentSize.height - self.fadeOffset ?
innerColor : outerColor]
// APPLY MASK COLORS
if let mask = scrollView.layer.mask as? CAGradientLayer {
mask.colors = colors
CATransaction.begin()
CATransaction.setDisableActions(true)
mask.position = CGPoint(x, y)
CATransaction.commit()
}
}
}
是否可以为水平轴添加另一个CAGradientLayer? 还是有一个更简单/更好的方法?
好像您要的是双线性渐变。 签出MKGradientView
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.