SwiftUI 6.0（iOS 18）新增的网格渐变色 MeshGradient 解惑

在这里插入图片描述

概述

在 SwiftUI 中，我们可以借助渐变色（Gradient）来实现更加灵动多彩的着色效果。从 SwiftUI 6.0 开始，苹果增加了全新的网格渐变色让我们对其有了更自由的定制度。

在这里插入图片描述

因为 gif 格式图片自身的显示能力有限，所以上面的动图无法传神的还原实际的美妙效果。强烈建议大家在模拟器或真机上运行本文中的示例代码。

在本篇博文中，您将学到如下内容：

概述
1. 渐变色的前世今生
2. 动画加持，美轮美奂
3. 综合运用
总结

闲言少叙，让我们马上进入渐变色的世界吧！

Let‘s dive in！！！😉

1. 渐变色的前世今生

在 SwiftUI 中小伙伴们时常会用渐变色（或称为阶梯色）来装扮我们的界面。

在这里插入图片描述

在 SwiftUI 1.0（iOS 13）中有 3 种渐变色类型，它们分别是：线性渐变色 LinearGradient、辐射渐变色 RadialGradient、以及角度渐变色 AngularGradient。

在这里插入图片描述

关于使用它们对进行任意视图裁剪的进一步介绍，请小伙伴们移步如下链接观赏精彩的内容：

SwiftUI用Gradient颜色裁剪任意视图

而在 SwiftUI 3.0（iOS 15）中，苹果又添加了一款椭圆渐变色 EllipticalGradient：

在这里插入图片描述

为了能够更加轻松的使用单一颜色的渐变色，苹果从 SwiftUI 4.0（iOS 16）开始干脆将其直接“融入”到 Color 的实例中去了：

在这里插入图片描述

我们可以这样使用它：

Text("Hello Panda")
	.foregroundStyle(.red.gradient)

在 WWDC 24 中，苹果再接再厉为 SwiftUI 6.0（iOS 18）添加了全新渐变色风格：网格渐变色（MeshGradient ）：

在这里插入图片描述

别被它的名字所吓到，其实它只是用纵横交错的方格来进一步细粒度控制颜色渐变的自由度，仅此而已。

使用网格渐变色很简单，我们只需创建一个 MeshGradient 实例即可：

MeshGradient(
        width: 2,
        height: 2,
        points: [.init(x: 0, y: 0),.init(x: 1, y: 0), .init(x: 0, y: 1), .init(x: 1, y: 1)],
        colors: [.red, .green, .blue, .yellow]
    )

如上代码所示：我们创建了一个 2 x 2 网格渐变色，并将其左上角、右上角、左下角、右下角的颜色依次设置为红色、绿色、蓝色以及黄色：

在这里插入图片描述

现在我们“静如处子”的网格渐变色貌似略显“呆滞”。别急，通过适当地调整其内部各个网格边框的基准点（或者颜色），我们可以让它行云流水般的“动如脱兔”。

2. 动画加持，美轮美奂

上面说过，要想动画网格渐变色很简单。我们只需使用若干状态来实时的描述 MeshGradient 中每个网格边框的相对位置以及网格内的颜色即可。

首先，我们创建一个 positions 数组来表示每个网格的边框，注意这是一个 3 x 3 网格：

@State var positions: [SIMD2<Float>] = [
        .init(x: 0, y: 0), .init(x: 0.2, y: 0), .init(x: 1, y: 0),
        .init(x: 0, y: 0.7), .init(x: 0.1, y: 0.5), .init(x: 1, y: 0.2),
        .init(x: 0, y: 1), .init(x: 0.9, y: 1), .init(x: 1, y: 1)
    ]

接下来，我们利用定时器连续调整 positions 里所有非顶角网格边框的相对位置。排除顶角网格的原因是：我们不想让整个网格渐变色在顶点被裁剪：

在这里插入图片描述

具体实现代码如下所示：

let timer = Timer.publish(every: 1/9, on: .current, in: .common).autoconnect()
    
let colors: [Color] = [
    .purple, .red, .yellow,
    .blue, .green, .orange,
    .indigo, .teal, .cyan
]

func randomizePosition(
    currentPosition: SIMD2<Float>,
    xRange: (min: Float, max: Float),
    yRange: (min: Float, max: Float)
) -> SIMD2<Float> {
    let updateDistance: Float = 0.01

    let newX = if Bool.random() {
        min(currentPosition.x + updateDistance, xRange.max)
    } else {
        max(currentPosition.x - updateDistance, xRange.min)
    }

    let newY = if Bool.random() {
        min(currentPosition.y + updateDistance, yRange.max)
    } else {
        max(currentPosition.y - updateDistance, yRange.min)
    }

    return .init(x: newX, y: newY)
}

MeshGradient(
        width: 3,
        height: 3,
        points: positions,
        colors: colors
    )
    .animation(.bouncy, value: positions)
    .onReceive(timer, perform: { _ in
        positions[1] = randomizePosition(
            currentPosition: positions[1],
            xRange: (min: 0.2, max: 0.9),
            yRange: (min: 0, max: 0)
        )
        
        positions[3] = randomizePosition(
            currentPosition: positions[3],
            xRange: (min: 0, max: 0),
            yRange: (min: 0.2, max: 0.8)
        )
        
        positions[4] = randomizePosition(
            currentPosition: positions[4],
            xRange: (min: 0.3, max: 0.8),
            yRange: (min: 0.3, max: 0.8)
        )
        
        positions[5] = randomizePosition(
            currentPosition: positions[5],
            xRange: (min: 1, max: 1),
            yRange: (min: 0.1, max: 0.9)
        )
        
        positions[7] = randomizePosition(
            currentPosition: positions[7],
            xRange: (min: 0.1, max: 0.9),
            yRange: (min: 1, max: 1)
        )
    })
    .animation(.bouncy, value: positions)
    .ignoresSafeArea()

编译并在 Xcode 预览中运行一见分晓：

在这里插入图片描述

再次重申：上面动图“颗粒感”很强是因为 gif 图片本身对颜色限制（最多显示 256 种颜色）的原因，实际效果会相当丝滑顺畅。

现在，我们不但可以恣意描绘静态渐变色，利用些许动画我们还可以让它活灵活现的呈现“秾姿故薰欲醉眼，芳信暗传尝苦心”之意境，棒棒哒！💯

想要系统学习最新 Swift 语言如何美美哒的进行苹果开发的小伙伴们，可以到我的《Swift语言开发精讲》专栏来逛一逛哦：

在这里插入图片描述

Swift 语言开发精讲

3. 综合运用

下面是一个将网格渐变色溶入到我们实际应用中的演示代码。在代码中我们做了这样几件事：

用不同状态控制不同的动画效果
使用 mask 将网格渐变色嵌入到文本视图中
扩展 View 以实现更简洁的视图方法

全部源代码在此：

import SwiftUI

extension View {
    @ViewBuilder
    func scaleEffect(_ ratio: CGFloat) -> some View {
        scaleEffect(x: ratio, y: ratio)
    }
}

struct ContentView: View {
    
    @State var bgAnimStart = false
    @State var shadowAnimStart = false
    
    @State var positions: [SIMD2<Float>] = [
        .init(x: 0, y: 0), .init(x: 0.2, y: 0), .init(x: 1, y: 0),
        .init(x: 0, y: 0.7), .init(x: 0.1, y: 0.5), .init(x: 1, y: 0.2),
        .init(x: 0, y: 1), .init(x: 0.9, y: 1), .init(x: 1, y: 1)
    ]

    let timer = Timer.publish(every: 1/9, on: .current, in: .common).autoconnect()
    
    let colors1: [Color] = [
        .purple, .red, .yellow,
        .blue, .green, .orange,
        .indigo, .teal, .cyan
    ]
    
    let colors2: [Color] = [
        .black, .red, .blue,
        .black, .teal, .blue,
        .blue, .red, .black
    ]

    func randomizePosition(
        currentPosition: SIMD2<Float>,
        xRange: (min: Float, max: Float),
        yRange: (min: Float, max: Float)
    ) -> SIMD2<Float> {
        let updateDistance: Float = 0.01

        let newX = if Bool.random() {
            min(currentPosition.x + updateDistance, xRange.max)
        } else {
            max(currentPosition.x - updateDistance, xRange.min)
        }

        let newY = if Bool.random() {
            min(currentPosition.y + updateDistance, yRange.max)
        } else {
            max(currentPosition.y - updateDistance, yRange.min)
        }

        return .init(x: newX, y: newY)
    }
    
    func createMeshGradientView(_ colors: [Color]) -> some View {
        MeshGradient(
            width: 3,
            height: 3,
            points: positions,
            colors: colors
        )
        .animation(.bouncy, value: positions)
        .onReceive(timer, perform: { _ in
            positions[1] = randomizePosition(
                currentPosition: positions[1],
                xRange: (min: 0.2, max: 0.9),
                yRange: (min: 0, max: 0)
            )
            
            positions[3] = randomizePosition(
                currentPosition: positions[3],
                xRange: (min: 0, max: 0),
                yRange: (min: 0.2, max: 0.8)
            )
            
            positions[4] = randomizePosition(
                currentPosition: positions[4],
                xRange: (min: 0.3, max: 0.8),
                yRange: (min: 0.3, max: 0.8)
            )
            
            positions[5] = randomizePosition(
                currentPosition: positions[5],
                xRange: (min: 1, max: 1),
                yRange: (min: 0.1, max: 0.9)
            )
            
            positions[7] = randomizePosition(
                currentPosition: positions[7],
                xRange: (min: 0.1, max: 0.9),
                yRange: (min: 1, max: 1)
            )
        })
    }
    
    let text = Text("Hello Panda")
        .font(.system(size: 108, weight: .heavy, design: .rounded))
        .foregroundStyle(.red.gradient)

    var body: some View {
         
        NavigationStack {
            ZStack {
                
                createMeshGradientView(colors1)
                    //.blur(radius: 30.0)
                    .opacity(0.8)
                
                text
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .opacity(0.01)
                    .background {
                        createMeshGradientView(colors2)
                            .mask {
                                text
                                    .scaleEffect(bgAnimStart ? 1.1 : 1.0)
                                    .rotationEffect(.degrees(bgAnimStart ? -10 : 0))
                            }
                            .shadow(color: shadowAnimStart ? .green : .black, radius: 10)
                    }
                
                
            }
            .ignoresSafeArea()
            .navigationTitle("Mesh Gradient 演示")
            .toolbar {
                Text("大熊猫侯佩 @ \(Text("CSDN").foregroundStyle(.red))")
                    .foregroundStyle(.primary.secondary)
                    .font(.headline)
            }
        }
        .task {
            withAnimation(.easeInOut(duration: 0.5).repeatForever(autoreverses: true)) {
                shadowAnimStart = true
            }
            
            withAnimation(.snappy(duration: 0.66, extraBounce: 15.0).repeatForever(autoreverses: true)) {
                bgAnimStart = true
            }
        }
    }
}

#Preview {
    ContentView()
}