OGeek|极客世界-中国程序员成长平台

标题: ios - 将水平和垂直 CAGradientLayer 蒙版应用到 UIScrollView/UICollectionView [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:21
标题: ios - 将水平和垂直 CAGradientLayer 蒙版应用到 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？或者也许有更简单/更好的方法？

---

Best Answer-推荐答案

看起来您要的是双线性渐变。查看 MKGradientView

关于ios - 将水平和垂直 CAGradientLayer 蒙版应用到 UIScrollView/UICollectionView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43028120/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4