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

server/2024/10/17 21:08:15/

在这里插入图片描述

概述

在 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 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.01let 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: { _ inpositions[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 SwiftUIextension View {@ViewBuilderfunc 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.01let 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: { _ inpositions[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()
}

总结

在本篇博文中，我们讨论了 SwiftUI 6.0（iOS 18）中全新网格渐变色 MeshGradient 的使用，并随后介绍如何利用酷炫的动画升华它的动态效果。

感谢观看，再会啦！😎


http://www.ppmy.cn/server/131403.html

相关文章

linux线程 | 线程的控制（二）

linux线程 | 线程的控制（二）

前言&#xff1a; 本节内容是线程的控制部分的第二个小节。 主要是列出我们的线程控制部分的几个细节性问题以及我们的线程分离。这些都是需要大量的代码去进行实验的。所以&#xff0c; 准备好接受新知识的友友们请耐心观看。 现在开始我们的学习吧。 ps:本节内容适合了解线程…
阅读更多...
如何减少光伏电站中的重复工作

如何减少光伏电站中的重复工作

一、优化设计与规划 详细的前期调研&#xff1a; 在项目启动前&#xff0c;进行详尽的现场调研&#xff0c;包括地形、气候、土壤条件等&#xff0c;确保设计方案与实际情况相符。评估电网接入条件&#xff0c;确保电站容量与电网需求相匹配&#xff0c;避免后期因电网接入问…
阅读更多...
【公共祖先】二叉树专题

【公共祖先】二叉树专题

里面涉及多个plus题 前言1.二叉树的最近公共祖先2.二叉搜索树的最近公共祖先3.二叉树的最近公共祖先II4.二叉树的最近公共祖先III5.二叉树的最近公共祖先IV 前言 公共祖先这一类题目&#xff0c;难度不大&#xff0c;但是非常实用&#xff0c;也是面试问到概率比较大的一类题目…
阅读更多...
前端处理磁盘数据的严格形式

前端处理磁盘数据的严格形式

想要处理这个数据首先我们需要知道什么是磁盘和磁盘的存储单位。 磁盘是计算机中存储数据的硬件。存储格式指的是磁盘采用的存储方式和结构。 磁盘存储单位常用包括以下几类&#xff1a; 位&#xff1a;二进制位&#xff0c;为0或者1。位是计算机的最小存储单位。 字节&#…
阅读更多...
链表(4)_合并K个升序链表_面试题

链表(4)_合并K个升序链表_面试题

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 链表(4)_合并K个升序链表_面试题 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录…
阅读更多...
Git进行版本控制操作流程

Git进行版本控制操作流程

目录 一、初始化仓库 操作流程 二、添加到缓存区 三、提交到版本库 四、推送至远程仓库 生成SSH密钥 将本地库中内容推送至已经创建好的远程库 推送 推送错误 第一种&#xff1a; 五、克隆 克隆整个项目 拉去最新代码 六、分支 1. 初始化仓库或克隆远端仓库 2…
阅读更多...
卷积的计算——nn.Conv2d（Torch.nn里的Convolution Layers模块里的Conv2d类）

卷积的计算——nn.Conv2d（Torch.nn里的Convolution Layers模块里的Conv2d类）

**前置知识&#xff1a; 1、张量和通道 张量&#xff1a;多维数组&#xff0c;用来表示数据&#xff08;图像、视频等&#xff09; 通道&#xff1a;图像数据的一部分&#xff0c;表示不同的颜色或特征层 通道只是张量的其中一个维度 以一张RGB图像为例&#xff0c; 该图像…
阅读更多...
Python+whisper/vosk实现语音识别

Python+whisper/vosk实现语音识别

目录 一、Whisper 1、Whisper介绍 2、安装Whisper 3、使用Whisper-base模型 4、使用Whisper-large-v3-turbo模型 二、vosk 1、Vosk介绍 2、vosk安装 3、使用vosk 三、总结 一、Whisper 1、Whisper介绍 Whisper 是一个由 OpenAI 开发的人工智能语音识别模型&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023