Linear, Radial, and Angular Gradients in SwiftUI

本节主要说说渐变色，在SwiftUI中，内置了三种渐变色方式，分别是

1. LinearGradient
2. AngularGradient
3. RadialGradient

下面我们分别来看看具体操作

我们还是会以一个 RoundedRectangle 来举例

LinearGradient 线性渐变

在 SwiftUI 中，LinearGradient 是用于创建线性渐变效果的视图修饰符。它可以在视图的背景、边框或任何需要颜色渐变的地方使用。

LinearGradient 需要两个或多个颜色作为参数，并可以指定渐变的起点和终点。渐变会沿着起点和终点之间的线性路径进行插值，从而创建出平滑过渡的色彩效果。

struct GradientsSample: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 25.0)
            .fill(
                LinearGradient(
                    gradient: Gradient(
                        colors: [
                            Color.green,
                            Color.blue
                        ]
                    ),
                    startPoint: .topLeading,
                    endPoint: .bottom)
            )
            .frame(width: 300, height: 200)
    }
}

AngularGradient 角度渐变

SwiftUI 中使用 AngularGradient 视图类型用于创建角度渐变效果，它可以让您在视图中应用角度变化的渐变色

以下是从中心点开始的一个角度渐变

struct GradientsSample: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 25.0)
            .fill(
                AngularGradient(
                    gradient: Gradient(
                        colors: [
                            Color.green,
                            Color.blue
                        ]
                    ),
                    center: .center,
                    angle: .degrees(215)
                )
            )
            .frame(width: 300, height: 200)
    }
}

我们可以调整中心点和角度来达到你想要的效果，我们可以把 Center 改成 TopLeading

RadialGradient 径向渐变

SwiftUI 中用于创建径向渐变效果的视图修饰符。它以一个中心点为基准，将颜色沿着半径方向渐变展开

以下是一个以中心点开始的圆形渐变，

    struct GradientsSample: View {
        var body: some View {
            RoundedRectangle(cornerRadius: 25.0)
                .fill(
                    RadialGradient(
                        gradient: Gradient(
                            colors: [
                                Color.green,
                                Color.blue
                            ]
                        ),
                        center: .center,
                        startRadius: 5, endRadius: 100
                    )
                )
                .frame(width: 300, height: 200)
        }
    }    

以下是三种渐变方式的基本代码

    struct GradientsSample: View {
        var body: some View {
            RoundedRectangle(cornerRadius: 25.0)
                .fill(
    //                LinearGradient(
    //                    gradient: Gradient(
    //                        colors: [
    //                            Color.green,
    //                            Color.blue
    //                        ]
    //                    ),
    //                    startPoint: .topLeading,
    //                    endPoint: .bottom)

                    
    //                AngularGradient(
    //                    gradient: Gradient(
    //                        colors: [
    //                            Color.green,
    //                            Color.blue
    //                        ]
    //                    ),
    //                    center: .topLeading,
    //                    angle: .degrees(215)
    //                )
                    
    //                RadialGradient(
    //                    gradient: Gradient(
    //                        colors: [
    //                            Color.green,
    //                            Color.blue
    //                        ]
    //                    ),
    //                    center: .center,
    //                    startRadius: 5,
    //                    endRadius: 100
    //                )
                )
                .frame(width: 300, height: 200)
        }
    }

总结对比

1. LinearGradient：线性渐变

   • LinearGradient 用于创建沿着一条直线方向的颜色渐变效果。
   • 它需要指定起点和终点，渐变将在这两个点之间进行插值。
   • 适用于创建左到右、上到下或者任意方向的颜色过渡效果。

2. RadialGradient：径向渐变

   • RadialGradient 用于创建从一个中心点向外径向扩展的颜色渐变效果。
   • 它需要指定起始半径和结束半径，颜色将在这两个半径之间进行插值。
   • 适用于创建类似光照的径向渐变或者类似水波纹的效果。

3. AngularGradient：角度渐变

   • AngularGradient 用于创建围绕中心点的角度方向的颜色渐变效果。
   • 它需要指定颜色数组和中心点，渐变将根据颜色数组在角度上进行插值。
   • 适用于创建类似扇形或者类似彩虹的颜色渐变效果。

快快实践一下，如果喜欢我的教程。就点个小红心吧~_^