SwiftUI 6.0(iOS 18/macOS 15)关于颜色 Color 的新玩法

在这里插入图片描述

概览

WWDC 2024 重装升级的 SwiftUI 6.0 让 Apple 不同平台(iOS 18/macOS 15)显得愈发的冰壶玉衡、美轮美奂。

在这里插入图片描述

之前梦寐以求的颜色混合功能在 WWDC 24 里终于美梦成真啦!

在本篇博文中,您将学到如下内容:

  • 概览
  • 1. 梦想成真:混合 Colors
  • 2. 混合两种以上颜色
  • 总结

相信学完本课之后,在 SwiftUI 6.0 中混合两种颜色将会变得轻而易举、小菜一碟。

那还等什么呢?让我们马上开始 Color 大“混战”吧!

Let‘s go!!!😉


1. 梦想成真:混合 Colors

何曾几时,在 SwiftUI 中我们希望有一种恣意混合多种颜色的方法。这不,在本届 WWDC 24 中苹果仿佛听到了我们秃头码农的心声。

于是乎,在 SwiftUI 6.0 中 Apple 终于为 Color 结构新增了 mix() 方法让“难关”冰解的破:

在这里插入图片描述
在这里插入图片描述

mix 方法签名很简单:我们只需传入两个需要混合的颜色、一个混合百分比(blending fraction)外加一个颜色空间(color space)即可。

值得说明的是,这里的颜色空间参数有两种选择:device 和 perceptual,默认情况下我们应该使用后者(perceptual)。因为从理论上来说,混合颜色的方式应该对人眼有意义,并且在不同设备屏幕之间是一致的。

而基于设备颜色空间(device)的混合可能产生不同的结果,这些结果也许是我们想要的,也许不是我们想要的。最佳方式是通过实验来查看实际的效果差异。

在下面的代码中,我们让粉色和蓝色以 50% 的混合度融合在了一起:

let leftColor = Color.pink
let rightColor = Color.blue
let mix = 0.5RoundedRectangle(cornerRadius: 16).fill(leftColor.mix(with: rightColor, by: mix, in: .perceptual)).frame(width: 100, height: 100)

在 Playground 中运行的效果如下图所示:

在这里插入图片描述

由于现在颜色可以神采飞扬的混合在一起了,所以这种混合效果可以被轻而易举的动画化。

struct ContentView: View {@State var showMixing = falsevar body: some View {VStack(spacing: 100) {RoundedRectangle(cornerRadius: 15).foregroundStyle(.red.mix(with: showMixing ? .black.opacity(0.88) : .red, by: 0.9, in: .perceptual)).frame(width: 200, height: 200)Toggle(isOn: $showMixing) {Text("显示混合动画")}.font(.largeTitle).toggleStyle(.button)}.animation(.smooth(duration: 5.0, extraBounce: 0.1), value: showMixing)}
}

在上面的代码中,我们通过 mix() 方法辅以万能的 animation() 动画修改器,让颜色渐变动画“活灵活现”:

在这里插入图片描述

借助 ColorPicker 颜色选择器视图,我们还可以恣意观赏不同颜色相互混合后的效果:

struct ColorMix: View {@State private var leftColor = Color.blue@State private var rightColor = Color.pink@State private var mix = 0.5var body: some View {VStack {HStack(spacing: 8) {ColorPicker("Left", selection: $leftColor).labelsHidden()ColorPicker("Right", selection: $rightColor).labelsHidden()}HStack {VStack {RoundedRectangle(cornerRadius: 16).fill(leftColor).frame(width: 100, height: 100)Text("\((1 - mix), format: .percent.precision(.fractionLength(0...2)))")}VStack {RoundedRectangle(cornerRadius: 16).fill(rightColor).frame(width: 100, height: 100)Text("\(mix, format: .percent.precision(.fractionLength(0...2)))")}}RoundedRectangle(cornerRadius: 16).fill(leftColor.mix(with: rightColor, by: mix, in: .perceptual)).frame(width: 100, height: 100).animation(.bouncy, value: mix)Slider(value: $mix, in: 0...1)}.padding()}
}

如上代码所示:我们使用两个 ColorPicker 视图来让用户选择自己心仪的颜色,并在底部的圆角矩形中通过颜色的 mix() 方法将它们的混合结果显示出来;我们还利用 SwiftUI 动画将混合效果表现的淋漓尽致、丝般顺滑。

编译并在 Xcode 预览中即可见运行效果:
在这里插入图片描述

2. 混合两种以上颜色

从 mix() 方法的参数上来看,貌似只能混合两种颜色。不过只要“略施小计”我们即可混合多种颜色:

struct ColorMix: View {@State private var leftColor = Color.blue@State private var rightColor = Color.pink@State private var midColor = Color.green@State private var mix = 0.5private var mixedColor: Color {let twoMix = leftColor.mix(with: rightColor, by: mix, in: .perceptual)return midColor.mix(with: twoMix, by: mix, in: .perceptual)}var body: some View {VStack {HStack(spacing: 8) {ColorPicker("Left", selection: $leftColor).labelsHidden()ColorPicker("Right", selection: $midColor).labelsHidden()ColorPicker("Right", selection: $rightColor).labelsHidden()}HStack {VStack {RoundedRectangle(cornerRadius: 16).fill(leftColor).frame(width: 100, height: 100)Text("\((1 - mix), format: .percent.precision(.fractionLength(0...2)))")}VStack {RoundedRectangle(cornerRadius: 16).fill(midColor).frame(width: 100, height: 100)Text("\(mix, format: .percent.precision(.fractionLength(0...2)))")}VStack {RoundedRectangle(cornerRadius: 16).fill(rightColor).frame(width: 100, height: 100)Text("\(mix, format: .percent.precision(.fractionLength(0...2)))")}}RoundedRectangle(cornerRadius: 16).fill(mixedColor).frame(width: 100, height: 100).animation(.bouncy, value: mixedColor)Slider(value: $mix, in: 0...1)}.padding()}
}

如上代码所示,我们通过 mixedColor 计算属性将左右两种颜色的混合结果再和中间的颜色相混合:

private var mixedColor: Color {let twoMix = leftColor.mix(with: rightColor, by: mix, in: .perceptual)return midColor.mix(with: twoMix, by: mix, in: .perceptual)
}

编译运行可见分晓:

在这里插入图片描述

现在,利用 SwiftUI 6.0 中颜色新增的 mix() 方法,让任何两种颜色“其乐融融”真是轻松的不要不要的!棒棒哒!💯

总结

在本篇博文中,我们讨论了在 SwiftUI 6.0(iOS 18/macOS 15)中颜色 Color 结构新增的 mix() 方法,现在融合任何颜色再也不是“黄粱一梦”了!

感谢观赏,再会!😎

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/34378.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyCharm安装requests失败解决方法

PyCharm安装request失败解决方法,尝试各种方法均未能成功安装 失败一: 若用如下图方法 失败二:在桌面终端命令安装后,在Pycharm中导包依旧显示红色报错,未安装 采用如下方法,选择Pycharm终端Terminal&…

PHP-CGI的漏洞(CVE-2024-4577)

通过前两篇文章的铺垫,现在我们可以了解 CVE-2024-4577这个漏洞的原理 漏洞原理 CVE-2024-4577是CVE-2012-1823这个老漏洞的绕过,php cgi的老漏洞至今已经12年,具体可以参考我的另一个文档 简单来说,就是使用cgi模式运行的PHP&…

leetcode 503.下一个更大的元素 | 独树一帜!单调栈登场!

题目链接:. - 力扣(LeetCode) 这道题目可以用暴力的办法写出来,只需要在数组nums后面再将元素粘到后面,在对数组里的每一个元素都进行分析就可以了,这里我们来说另外一种解法——单调栈 我们这里先定义一…

数据收集和数据分析

数据分析和收集是一个多步骤的过程,涉及到不同的方法和思维构型。 以下是一些常见的数据收集方法和数据分析的思维模式: ### 数据收集方法: 1. **调查问卷**: 通过设计问卷来收集定量或定性数据。(质量互变规律里面…

MOD和DIV的区别说明

1.说明 div 是取 A/BC,得到是C的值; mod 是取 A/BC...D,得到余数D的值。 2.实践 A8,B3,C2,D2 A9,B3,C3,D0

13.1.k8s集群的七层代理-ingress资源(进阶知识)

目录 一、ingress概述 1.前言 2.问题 3.ingress资源 二、ingress-nginx是什么 三、ingress-nginx 实现原理 四、部署ingress-nginx 1.获取部署文件 ingress-nginx.yaml 2.部署ingress-nginx 3.检查部署是否成功 五、编写使用Ingress样例代码 1.Ingress资源对象yaml文…

【科研基础】PRML

文章目录 IntroductionSupervised / unsupervised learningOverfittingBayesianIntroduction Supervised / unsupervised learning P3 Overfitting p6 p9: For a given model complexity, the over-fitting problem become less severe as the size of the data set increa…

PhotoShop自动生成号码牌文件

1、说明 设计卡牌的时候,遇到自动生成编号,从01500到-02500,一个一个的手写,在存储保存成psd格式的文件,会很耗时。 下面将介绍如何使用ps自动生成psd格式的文件 2、使用excle生成数字 从01500到-02500 第一步&…

做现货白银模拟账户太爽,一做实盘就亏?

太多现货白银投资者有过这样的经历:自己做模拟账户的时候如鱼得水,盈利几乎手到拿来,实在爽得不要不要的,但在实盘操作中却常常面临亏损,甚至出现巨亏的情况。其实这主要是由于模拟交易与实盘交易之间存在显著的差异&a…

VBA技术资料MF166:提取某区域特定数据到工作表

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…

python基础练习题

题目来自 白月黑羽 一.对象与数字对象 题目1 请大家写一行代码,计算并打印出 993 196 的和, 乘以 7 的积, 然后除以3 这行代码 先在Python交互式命令行中运行 再将代码存入文件,用Python解释器去执行该文件 题目2 请大…

Python武器库开发-武器库篇之Thinkphp5 SQL注入漏洞(六十六)

Python武器库开发-武器库篇之Thinkphp5 SQL注入漏洞(六十六) 漏洞环境搭建 这里我们使用Kali虚拟机安装docker并搭建vulhub靶场来进行ThinkPHP漏洞环境的安装,我们进入 ThinkPHP漏洞环境,可以 cd ThinkPHP,然后通过 …

3d怎么把歪的模型摆正?---模大狮模型网

在进行3D建模过程中,有时候会遇到模型出现歪曲或者旋转不正确的情况,这可能会影响到后续的设计和渲染效果。因此,学会将歪曲的模型摆正是一个非常重要的技巧。模大狮将介绍几种常用的方法,帮助您有效地将歪曲的3D模型摆正&#xf…

Python19 lambda表达式

在 Python 中,lambda 表达式是一个小型匿名函数,通常用于实现简单、单行的函数。lambda 函数可以接受任意数量的参数,但只能有一个表达式。 基本语法: lambda arguments: expression这里,arguments 是传递给 lambda …

精益思想在机器人开发中的应用体现

精益思想源于制造业,旨在通过消除浪费、优化流程、持续改进来提升企业竞争力。在机器人开发中,精益思想同样具有指导意义。它要求开发团队在需求分析、设计、制造、测试等各个环节中,不断追求精益求精,力求在降低成本的同时提升产…

微信小程序怎么使用JSON动画?

微信小程序怎么使用JSON动画? 前言: 在微信小程序中实现动画有很多种方式,今天主要讲JSON动画 css3动画jsAPI动画使用PAG素材做动画使用GIF播放动画使用JSON文件做动画 准备工作 JSON动画素材下载lottie-miniprogram插件创建微信小程序的…

.NET 一些常用的类型转换扩展

#region 转换为string /// <summary> /// 将object转换为string&#xff0c;若转换失败&#xff0c;则返回""。不抛出异常。 /// </summary> /// <param name"obj"></param> /// <r…

多路h265监控录放开发-(14)

首先创建一个新类XCalendar继承QCalendarWidget类&#xff0c;然后在UI视图设计器中把日历提升为XCalendar&#xff0c;通过这个函数自己设置日历的样式 xcalendar.h #pragma once #include <QCalendarWidget> class XCalendar :public QCalendarWidget { public:XCal…

降息(Rate cuts)会导致股市上涨还是下降?答案是上涨

降息 中文版 根据经济学和金融学的基本理论&#xff0c;利率下行&#xff08;降息&#xff09;通常会导致股市上升。以下是原因及解释&#xff1a; 借贷成本降低&#xff1a; 降息会降低企业和消费者的借贷成本。企业可以更低的成本借款进行投资和扩展业务&#xff0c;增加未…

论文神器:即插即用归一化模型!无缝插入助力涨点!

归一化是深度学习和机器学习中一个非常重要的步骤&#xff0c;它通过对数据或网络层的输出进行变换&#xff0c;使其符合特定的标准&#xff0c;有效缓解不同特征间由于量纲和数值范围差异造成的影响&#xff0c;加速模型的收敛速度&#xff0c;并提高模型精度。 大多数归一化…