将水平和垂直 CAGradientLayer 蒙版应用到 UIScrollView/UICollectionView
Posted
技术标签:
【中文标题】将水平和垂直 CAGradientLayer 蒙版应用到 UIScrollView/UICollectionView【英文标题】:Apply both horizontal & vertical CAGradientLayer Mask to UIScrollView/UICollectionView 【发布时间】:2017-03-26 11:27:01 【问题描述】:我有一个可以在 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?或者也许有更简单/更好的方法?
【问题讨论】:
是的,你是怎么做到的?!!? 【参考方案1】:看起来您要的是双线性渐变。查看MKGradientView
【讨论】:
以上是关于将水平和垂直 CAGradientLayer 蒙版应用到 UIScrollView/UICollectionView的主要内容,如果未能解决你的问题,请参考以下文章
向 CAGradientLayer 添加蒙版使 UIBezierPath 消失
如何将 CAGradientLayer 应用于 UINavigationController 背景
UILabel 上的 CAGradientLayer 无法旋转