75142913在线留言
【SwiftUI基础篇】16 渐变颜色AngularGradient、LinearGradient、RadialGradient_IOS开发_网络人

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

Kwok 发表于:2021-04-06 14:06:20 点击:4 评论: 0

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.neter8.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)
除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/130.html
标签:渐变颜色Kwok最后编辑于:2021-04-06 14:06:24
0
感谢打赏!

《【SwiftUI基础篇】16 渐变颜色AngularGradient、LinearGradient、RadialGradient》的网友评论(0)

本站推荐阅读

热门点击文章