SwiftUI 精通之路05: 径向渐变Radial Gradient

zyosasa
653 阅读4分钟

前言

更新还在继续... 这是我继续参加 第四期创作者训练营 的文章,继续不断总结自己的学习经历。点击查看活动链接。

今日学习鸡汤: 当你被其他事务带来困扰的时候，你就更应该需要知道你目前自己的优势！因为你还不认清自己，马上就来不及了。

本章节我们主要学习径向渐变，其根据渐变类型可以分为线性渐变，角度渐变，以及径向梯度渐变.

好的废话不多说，我们进入正文 🫧 ！

正文

我们进入我们的工程项目点击Xcode顶部导航的 File > New > File from Template 选择 iOS > SwiftUI 模版创建新的SwiftUI文件

快捷键 Command + N，我们新建文件名为 GradientBootcamp.swift

线形渐变

线形渐变顾名思义就是定义的颜色根据线条规划路径进行慢慢变化，我们首先在页面中创建我们矩形，用来进行颜色的变化。

RoundedRectangle(cornerRadius: 20)
            .frame(width: 300, height: 200, alignment: .center)

在使用线形渐变前，我们先看看这个修饰器的参数：

LinearGradient(colors: [ Color ] , startPoint: UnitPoint, endPoint: UnitPoint))

我们可以看到目前这个是有三个参数

  1. Colors: 表示渐变的颜色，是由Color结构组成的数组类型，可以存放多种颜色组合。

  2. startPoint: 表示起点位置

  3. endPoint: 表示终止位置

我们这边给我们定义的圆角矩形填充三种颜色：红色，绿色，橘色，并且设置起点位置为.leading, 结束为止为.trailing。

 RoundedRectangle(cornerRadius: 20)
            // 前后渐变
            .fill(LinearGradient(colors: [Color.red, Color.green, Color.orange], startPoint: UnitPoint.leading, endPoint: UnitPoint.trailing))
            .frame(width: 300, height: 200, alignment: .center)

这边可以给大家推荐下颜色渐变的网站：webgradients 以及 Hex 转 UIColor 类型的网站：uicolor.io ，大家可以在上面自行寻找合适的颜色搭配自己自定义设置。

角度渐变

角度渐变（Angular Gradient）它沿着圆形路径从一个点开始，以特定的角度顺时针或逆时针变化颜色，而不是沿线性或径向的路径。角度渐变非常适合用来创建旋转、光晕或时钟表盘等效果。

它最主要的特点就是以圆心为中心，从起始颜色开始，逐渐过渡到下一个颜色，并最终回到起始颜色完成一圈。

在 SwiftUI 中，使用 AngularGradient 可以轻松实现角度渐变。AngularGradient 是 Gradient 的一种，它允许定义渐变的中心点和颜色列表。

Circle()
    .fill(AngularGradient(
            gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple]),
            center: .center,
            angle: .degrees(360)
        )
    )
    .frame(width: 200, height: 200)

  • gradient: 定义渐变的颜色序列，可以使用多个颜色。

  • center: 指定渐变的中心点，默认是 .center。

  • angle: 定义渐变的起始角度，0度是从顶部开始。

在上面例子中，渐变沿着圆形路径从红色开始，顺时针经过黄色、绿色、蓝色和紫色，最终回到红色，形成一个完整的渐变圆。

我们其实可以根据需求调整渐变的颜色和角度，甚至结合其他形状和布局来实现更复杂的效果。

径向梯度渐变

顾名思义，径向渐变（Radial Gradient）是从中心向外扩散的颜色渐变效果。它从一个中心点开始，颜色逐渐向外过渡到边缘，适合用来模拟光照、圆形阴影或聚焦效果。

其渐变从中心开始向外扩展，通常是圆形或椭圆形的路径

我们使用 RadialGradient 来实现径向渐变。与角度渐变类似，RadialGradient 允许你指定中心点、半径以及渐变的颜色。

Circle()
    .fill(
        RadialGradient(
            gradient: Gradient(colors: [.blue, .green, .yellow]),
            center: .center,
            startRadius: 20,
            endRadius: 100
        )
    )
    .frame(width: 200, height: 200)

  • gradient: 定义渐变的颜色列表。

  • center: 渐变的中心点，默认是 .center。你也可以根据需要设置其他位置，如 .top, .bottom。

  • startRadius: 渐变开始的半径（从中心点开始）。

  • endRadius: 渐变结束的半径，决定颜色过渡的范围。

在这个例子中，渐变从中心的蓝色开始，逐渐过渡到绿色，最后在边缘变为黄色。通过调整 startRadius 和 endRadius，你可以控制颜色变化的范围。

扩展效果

  • 如果 startRadius 很小，颜色变化会集中在中心，而 endRadius 越大，颜色过渡会越平滑且扩散到整个形状。
  • 你可以将渐变应用到任何形状（如矩形、椭圆），并根据需求自定义中心点、半径和颜色，以创建丰富的视觉效果。

这两种渐变在不同的场景下都有独特的作用，角度渐变更适合旋转类效果，径向渐变则适合辐射类效果。

好的！

关于渐变效果就这些，希望对你的学习有帮助，一起进步！很很高兴在这里见到你，下章再见

avatar
文章
阅读
粉丝