【SwiftUI基础篇】16 渐变颜色AngularGradient、LinearGradient、RadialGradient

SwiftUI为我们提供了几种形状的渐变颜色，我们可以利用这些特点呈现出不同的视觉效果。

一、Color纯色（无渐变）

在介绍渐变颜色之前可以先看一下：Color一个依赖环境的颜色。我们在设置纯色背影的时候会用到此项。

Color(.blue)

Color是一种后期绑定令牌:SwiftUI只会在给定环境中使用它之前将其解析为一个具体的值。

二、AngularGradient 表示环装的颜色渐变（一个角梯度）

AngularGradient 表示环装的颜色渐变，center 表示渐变的中心，startAngle 和 endAngle 表示渐变的起始角度和结束角度，注意剩余的部分会被两端的颜色均分。

AngularGradient(
//gradient是一种颜色梯度，表示为一组颜色起止点，每个止点都有一个参数位置值。
    gradient: Gradient(colors: [.red, .white]),
    center: .center,//位置
    startAngle: Angle(degrees: 0),//开始角度
    endAngle: Angle(degrees: 180)//结束角度
)

多个颜色的组合：

AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center)

角梯度也称为“二次曲线”梯度。当角度相对于中心点和定义的起始和结束角度发生变化时，这个渐变应用颜色函数。如果endAngle - startAngle > 2π，梯度只绘制最后一个完整的回合。如果endAngle - startAngle < 2π，梯度将用梯度位置1和0定义的颜色填充缺失区域，并在缺失区域的中间两个位置之间过渡。梯度将单位空间中心点映射到每个填充了梯度的形状的边界矩形。

利用 AngularGradient 实现一个圆锥渐变：

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

三、LinearGradient 线性渐变

LinearGradient是一个线性渐变颜色。它沿着一个轴应用颜色函数，这个轴由它的起始点和结束点定义。梯度将单位空间点映射到每个填充了梯度的形状的边界矩形。 

LinearGradient(
//颜色取值范围
    gradient: Gradient(colors: [.red, .white]),
    startPoint: .top,//开始点
    endPoint: .bottom//结束点
)

使用示例：http://www.55mx.com/ios/110.html 背景颜色利用ZStack实现的

四、RadialGradient 径向渐变

RadialGradient 表示环装沿半径方向的渐变。center 表示环的中心。 startRadius 和 endRadius 分别表示渐变起始和结束的半径。

渐变应用颜色函数作为从中心点的距离，缩放以适应定义的开始和结束半径。梯度将单位空间中心点映射到每个填充了梯度的形状的边界矩形。

RadialGradient(
//颜色取值范围
    gradient: Gradient(colors: [.white, .orange, .white]),
    center: .center,//布局位置
    startRadius: 100,//开始半径
    endRadius: 200//结束半径
)

利用RadialGradient实现一个圆形的径向渐变：

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

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/130