雨燕：带有动画的渐变

要向视图添加渐变效果，您需要创建CAGradientLayer类的实例，并将其作为视图的子层添加。 这意味着您实际上将使用 UIView 实例 的子层 ，而不是视图本身。

这是我们的具有渐变背景的视图：

  targetView = UIView（）
 targetView.translatesAutoresizingMaskIntoConstraints = false
 targetView.clipsToBounds = true
 targetView.backgroundColor =珊瑚玫瑰
 targetView.layer.cornerRadius = 8
 view.addSubview（targetView）targetView.leftAnchor.constraint（equalTo：view.leftAnchor，常数：35）.isActive = truetargetView.rightAnchor.constraint（equalTo：view.rightAnchor，常数：-35）.isActive = truetargetView.centerYAnchor.constraint （equalTo：view.centerYAnchor）.isActive = truetargetView.heightAnchor.constraint（equalToConstant：270）.isActive = true 

创建渐变效果

现在我们准备添加一些将渐变效果应用于视图的代码。 首先，我们需要添加一个CAGradientLayer类型的新属性。 我们将设置图层的框架和颜色以产生渐变效果。

 让backgroundGradientLayer = CAGradientLayer（）func applyGradient（）{
     backgroundGradientLayer.frame = targetView.bounds
     backgroundGradientLayer.colors = [reynard.cgColor，coralRose.cgColor]
     targetView.layer.addSublayer（backgroundGradientLayer）
 } 

点击“ 应用渐变”按钮，查看结果：

CAGradientLayer的colors属性是一组将定义渐变效果的颜色。

不幸的是，该属性需要一个 AnyObject 数组 ，但仅适用于 CGColor 数组 ，因此在设置其值时要小心。

您可能会注意到，现在每种颜色都占据了图层的一半。 您可以通过更改每种颜色的位置来更改此行为。

颜色位置

CAGradientLayer具有[NSNumber]类型的locations属性。 此数组中的每个数字确定colors数组中每种颜色的起始位置。

这些数字应在0.0到1.0之间。

让我们看看它是如何工作的。 我们必须对applyGradient进行一些更改。

  backgroundGradientLayer.colors = [reynard.cgColor，coralRose.cgColor]
 backgroundGradientLayer.locations = [0.0，0.3]
 targetView.layer.addSublayer（backgroundGradientLayer） 

现在， 雷纳德色彩只占我们观点的三分之一。

渐变方向

现在，您可能还会注意到，渐变从我们视图的顶部开始，一直向下到其底部。 我们可以使其从左到右。 让我们添加一个可更改渐变方向的开关 。

  func setupIsHorizo​​ntalSwitch（）{
    isHorizo​​ntalSwitch = UISwitch（）
    isHorizo​​ntalSwitch.translatesAutoresizingMaskIntoConstraints = false
    isHorizo​​ntalSwitch.tintColor =雷纳德
    isHorizo​​ntalSwitch.onTintColor =雷纳德
    view.addSubview（isHorizo​​ntalSwitch）isHorizo​​ntalSwitch.topAnchor.constraint（equalTo：targetView.bottomAnchor，常数：35）.isActive = true
    isHorizo​​ntalSwitch.rightAnchor.constraint（equalTo：targetView.rightAnchor）.isActive = true让label = UILabel（）
    label.translatesAutoresizingMaskIntoConstraints = false
    label.textColor =雷纳德
    label.textAlignment = .right
    label.text =“水平”
    view.addSubview（label）label.leftAnchor.constraint（equalTo：targetView.leftAnchor）.isActive = true
    label.centerYAnchor.constraint（equalTo：isHorizo​​ntalSwitch.centerYAnchor）.isActive = true
    label.rightAnchor.constraint（equalTo：
 isHorizo​​ntalSwitch.leftAnchor，常数：-10）。isActive= true
 } 

CAGradientLayer提供了两个属性来指定渐变的方向： startPoint和endPoint ，均为CGPoint类型。 该点的 值 x 和 y 的范围应为0.0到1.0。

在iOS中， 零点是左上角。 现在我们可以使渐变水平：

  func isHorizo​​ntal（_ switchState：UISwitch）{
   如果switchState.isOn {
       backgroundGradientLayer.startPoint = CGPoint（x：0.0，y：0.5）
       backgroundGradientLayer.endPoint = CGPoint（x：1.0，y：0.5）
    }其他{
       backgroundGradientLayer.startPoint = CGPoint（x：0.5，y：0.0）
       backgroundGradientLayer.endPoint = CGPoint（x：0.5，y：1.0）
    }
 } 

渐变动画

我们将为渐变的两个属性设置动画： colors和locations 。

从Apple文档中：

使用继承的init(keyPath:)方法创建CABasicAnimation的实例，并指定要在渲染树中进行动画处理的属性的关键路径。

例如，您可以为图层的标量（即包含单个值）属性（例如opacity ）设置动画。

您可以在此处阅读有关CABasicAnimation更多信息。

这是动画locations属性的代码：

 让gradientChangeChange = CABasicAnimation（keyPath：“位置”）
 gradientChangeLocation.duration = 2
 gradientChangeLocation.toValue = [0.0，0.7]
 gradientChangeLocation.fillMode = kCAFillModeForwards
 gradientChangeLocation.isRemovedOnCompletion =否
 self.backgroundGradientLayer.add（gradientChangeLocation，forKey：“ locationsChange”） 

和下面的colors属性代码：

  var cgColorsTo = [CGColor]（）
用于toColors {
    cgColorsTo.append（color.cgColor）
 }
让GradientChangeColor = CABasicAnimation（keyPath：“颜色”）
 gradientChangeColor.duration = 2
 gradientChangeColor.toValue = cgColorsTo
 gradientChangeColor.fillMode = kCAFillModeForwards
 gradientChangeColor.isRemovedOnCompletion =否
 self.backgroundGradientLayer.add（gradientChangeColor，forKey：“ colorChange”） 

摘要

如您所见，渐变并不是很容易使用，并且明智地使用渐变绝对可以帮助您的应用在其他应用中脱颖而出。

---

如果您认为这篇文章对您有所帮助，请不要忘记喜欢它！