渐变色Swift

Question

这是我要尝试的操作：

屏幕截图来自Iphone：

这是我的代码：

@IBOutlet weak var viewBottomBorder: UIView!

let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
let whiteColor = UIColor.black
gradient.colors = [whiteColor.withAlphaComponent(0.0).cgColor, whiteColor.withAlphaComponent(1.0), whiteColor.withAlphaComponent(1.0).cgColor]
gradient.locations = [NSNumber(value: 0.0),NSNumber(value: 0.2),NSNumber(value: 1.0)]
gradient.frame = viewBottomBorder.bounds
viewBottomBorder.layer.mask = gradient

问题：如何以渐变显示白色的相同文本？

有人可以向我解释如何解决此问题，我已经尝试解决此问题，但没有结果。

任何帮助将不胜感激。

谢谢。

Answer 1

您需要从顶部开始渐变，因为在顶部较暗。因此，x应该具有最大alpha。然后，随着y的增加，减小alpha。

尝试一下：

let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 1.0, y: 0.0)
gradient.endPoint = CGPoint(x: 0.0, y: 1.0)
let whiteColor = UIColor.black
gradient.colors = [whiteColor.withAlphaComponent(1.0).cgColor, whiteColor.withAlphaComponent(1.0), whiteColor.withAlphaComponent(0.0).cgColor]
gradient.locations = [NSNumber(value: 1.0),NSNumber(value: 0.7),NSNumber(value: 0.0)]
gradient.frame = viewBottomBorder.bounds
viewBottomBorder.layer.mask = gradient

Answer 2

使用上面的代码将Gradient应用于您的视图

var gradientBackground : CAGradientLayer?

func applyGradientToBackground() {
    if self.gradientBackground != nil {
        self.gradientBackground?.removeFromSuperlayer()
    }
    self.gradientBackground = CAGradientLayer()
    self.gradientBackground?.frame = self.your_view_name.bounds
    let cor1 = UIColor.black.withAlphaComponent(1).cgColor
    let cor2 = UIColor.white.cgColor
    let arrayColors = [cor1, cor2]
    self.gradientBackground?.colors = arrayColors
    self.your_view_name.layer.insertSublayer(self.gradientBackground!, at: 0)
}

Answer 3

另一种选择：

func setupGradient(on view: UIView, withHeight height: CGFloat) {
    // this is view that holds gradient
    let gradientHolderView = UIView()
    gradientHolderView.backgroundColor = .clear
    gradientHolderView.translatesAutoresizingMaskIntoConstraints = false

    // here you set layout programmatically (you can create this view in storyoard as well and attach gradient to it)
    // make sure to position this view under your text
    view.addSubview(gradientHolderView) // alternative: view.insertSubview(gradientHolderView, belowSubview: YourTextLaber)
    gradientHolderView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    gradientHolderView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    gradientHolderView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    gradientHolderView.heightAnchor.constraint(equalToConstant: height).isActive = true

    // this is needed to kinda refresh layout a little so later we can get bounds from view. I'm not sure exactly why but without this if you create view programmatically it is needed
    gradientHolderView.setNeedsLayout()
    gradientHolderView.layoutIfNeeded()

    // here you create gradient as layer and add it as a sublayer on your view (modify colors as you like)
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = gradientHolderView.bounds
    gradientLayer.colors = [UIColor.clear.cgColor, UIColor(white: 0, alpha: 0.6).cgColor]
    gradientHolderView.layer.addSublayer(gradientLayer)
}