使用CAGradientLayer创建渐变效果

渐变图层：视觉魔法的开始 ✨

CAGradientLayer 是一个功能强大的 Core Animation 图层，它能让你轻松创建出平滑的颜色渐变效果。想象一下，你的 UI 元素可以从一种颜色优雅地过渡到另一种颜色，这无疑会大大提升用户界面的美观度和专业感。它继承自 CALayer，因此拥有所有图层操作的灵活性。

配置你的渐变：颜色与位置 🎨

要使用 CAGradientLayer，你首先需要定义渐变的颜色和它们在渐变中的位置。这就像在画布上选择颜料并决定它们在哪里混合。

• colors 属性：这是一个 [Any]? 类型的数组，但实际上你需要传入 [CGColor] 数组。它定义了渐变中使用的颜色。例如，你可以从红色渐变到蓝色。
• locations 属性：这是一个 [NSNumber]? 类型的数组，用于指定 colors 数组中每个颜色的相对位置。这些值必须在 0.0 到 1.0 之间，并且是递增的。如果省略，颜色将均匀分布。

例如，如果你有三种颜色，并且希望中间的颜色在渐变中占据更大的比例，你可以调整 locations 数组。

渐变方向：从何处开始，到何处结束 ➡️⬇️

渐变的方向对于最终效果至关重要。CAGradientLayer 提供了两个关键属性来控制渐变的方向：

• startPoint 属性：一个 CGPoint，定义了渐变的起始点。它的坐标系是单位坐标系，即 (0,0) 代表图层的左上角，(1,1) 代表右下角。
• endPoint 属性：同样是一个 CGPoint，定义了渐变的结束点。

例如，要创建一个从左到右的水平渐变，你可以设置 startPoint 为 (0, 0.5)，endPoint 为 (1, 0.5)。如果你想要一个对角线渐变，可以尝试 (0,0) 到 (1,1)。这些点的选择直接影响渐变的视觉流动。

实际操作：创建你的第一个渐变 🚀

让我们通过一个简单的例子来创建一个渐变图层。假设你想要一个从天蓝色到深蓝色的垂直渐变背景。

1. 创建 CAGradientLayer 实例：

   let gradientLayer = CAGradientLayer()

2. 设置 frame：确保渐变图层覆盖你想要的区域。

   gradientLayer.frame = view.bounds

3. 定义颜色：

   gradientLayer.colors = [
       UIColor.systemTeal.cgColor,
       UIColor.systemBlue.cgColor
   ]

4. 设置渐变方向：从顶部到底部。

   gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
   gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)

5. 添加到视图的图层：

   view.layer.addSublayer(gradientLayer)

通过这几步，你就能在你的视图上看到一个漂亮的垂直渐变了！

渐变类型：线性与径向 🌀

除了线性的颜色过渡，CAGradientLayer 还支持不同类型的渐变。type 属性允许你选择渐变的样式。

• .axial (默认)：这是最常见的线性渐变，颜色沿着 startPoint 和 endPoint 定义的轴线进行过渡。
• .radial (iOS 12+)：径向渐变，颜色从一个中心点向外扩散。这能创造出非常酷炫的圆形或椭圆形渐变效果，就像一个光晕。

使用 .radial 类型时，startPoint 和 endPoint 会被解释为渐变圆的中心和半径。例如，startPoint 可以是圆心，而 endPoint 则定义了渐变结束的半径方向。掌握这些属性，你就能创造出无限的视觉可能性！