白玉微瑕:闲谈 SwiftUI 过渡(Transition)动画的“口是心非”(下)
概述
秃头小码农们都知道,SwiftUI 不仅仅是一个静态 UI 构建框架那么简单,辅以海量默认或自定义的动画和过渡(Transition)特效,我们可以将 App 界面的绚丽升华到极致。
不过,目前 SwiftUI 中的过渡(Transition)动画在某些“敏感”场景中会有让人意想不到的效果,我们如何随机应变回归本源呢?本篇由此应运而生。
在本篇博文中,您将学到如下内容:
- 概述
- 3. Transition 动画之“怪癖”
- 4. 暗度陈仓:用动画(Animation)代替过渡(Transition)
- 总结
本文示例代码测试环境:macOS 15.2 + Xcode 16.1
百闻不如一见,那小伙伴们还等什么呢?让我们马上开始 Transition 动画除虫大冒险吧!
Let‘s go!!😉
3. Transition 动画之“怪癖”
虽然 Transition 动画在大多数情况下表现的都十分惊艳,但“金无足赤,人无完人”,Transition 动画在某些场景下也会“选择性失灵”。
其中一种场景就是:若视图同时包裹在 NavigationStack 和 Form(或 List)容器内,则视图的插入 Transition 过渡动画会消失不见,变为“鸟迹虫丝”。
在下面的代码中,我们测试的两枚绿色圆形分别放在了不同的容器中:
- 顶部的圆形放在 NavigationStack 和 List 中;
- 底部的圆形只放在了 NavigationStack 中;
struct ContentView: View {@State var magic = falsevar body: some View {NavigationStack {VStack(alignment: .leading) {List {Section("同时嵌入在 NavigationStack 或 List 中") {VStack {if magic {Circle().foregroundStyle(.green).frame(width: 100, height: 100).transition(.scale)}Spacer()Text("没有插入,只有消失时的缩放过渡动画")}.frame(height: 200)}}.listStyle(.plain)Divider()Section("只嵌入在 NavigationStack 中") {VStack {if magic {Circle().foregroundStyle(.green).frame(width: 100, height: 100).transition(.scale)}Spacer()Text("插入和消失时皆有缩放过渡动画")}.frame(height: 200)}Button("Magic") {withAnimation(.bouncy) {magic.toggle()}}}.padding().navigationTitle("过渡动画“怪癖”演示")}}
}
运行结果如下所示:
可以看到:顶部圆形没有插入过渡动画,而底部圆形的过渡动画完美无缺。
注意,上面代码中两个圆形视图上的过渡动画代码都是完全一致的,不存在特殊对待的情况。
若想进一步了解 SwiftUI 中动画的各种高级操作技能,请小伙伴们猛戳下面的链接观赏进阶内容:
- SwiftUI 动画进阶:实现行星绕圆周轨道运动
- 如何为 Apple 官方 SwiftUI 示例中的图表元素加上首显动画?
- SwiftUI4.0有趣的动画升级:新iOS16视图内容过渡动画
- SwiftUI如何模拟视图发光增大的动画效果
- 阅读第三方源代码解决SwiftUI弹出视图无动画以及List被诡异重建的问题
4. 暗度陈仓:用动画(Animation)代替过渡(Transition)
对于上面过渡(Transition)动画的这种“怪癖”,我们有一些解决办法来绕过它。不过,它们大多比较复杂,那么有没有简单的方法呢?
答案是肯定的!
其实,SwiftUI 中的普通动画与过渡动画是非常类似的,从本质上来说:在播放动画时前者会保持视图“稳定”,而后者会导致视图被插入或删除。
有了这一思路,我们就可以轻松的将过渡动画转换为普通的动画了:
Section("同时嵌入在 NavigationStack 或 List 中") {VStack {Circle().foregroundStyle(.green).frame(width: 100, height: 100).scaleEffect(magic ? .init(width: 1, height: 1) : .zero)Spacer()Text("利用普通动画解决过渡动画丢失的问题")}.frame(height: 200)
}
从上面的代码可以看出,我们将原先绿色 Circle 上的过渡动画转换成了在视图尺寸上缩放的普通动画效果:
同样,对于博文开头 WorryObject 选择过渡动画缺失的情况,我们也可以如法炮制:
Image(systemName: "checkmark.circle.fill").foregroundStyle(.green.gradient).font(.title3.bold()).scaleEffect(selectingWorryObjectID == wObject.oid ? .init(width: 1, height: 1) : .zero).matchedGeometryEffect(id: 1, in: ns, isSource: selectingWorryObjectID == wObject.oid)
最后运行一下,在 Xcode 预览中欣赏一番我们的最终成果吧:
现在,对于那些 SwiftUI 中过渡动画失灵又无计可施的撸码场景我们也可以轻松应对了,棒棒哒!💯
想要进一步系统地学习 Swift 开发的小伙伴们,可以来我的《Swift 语言开发精讲》专栏逛一逛哦:
- 《Swift 语言开发精讲》
总结
在本篇博文中,我们进一步讨论了 SwiftUI 过渡动画在什么场景下可能会掉链子,并用一招将其彻底驯服。
感谢观赏,再会啦!😎
相关文章:
白玉微瑕:闲谈 SwiftUI 过渡(Transition)动画的“口是心非”(下)
概述 秃头小码农们都知道,SwiftUI 不仅仅是一个静态 UI 构建框架那么简单,辅以海量默认或自定义的动画和过渡(Transition)特效,我们可以将 App 界面的绚丽升华到极致。 不过,目前 SwiftUI 中的过渡&#x…...
5.4 解锁 OpenAI - Translator:模块设计,构建翻译系统的 “基石”
OpenAI-Translator 模块设计 OpenAI-Translator 作为一款基于 OpenAI GPT 模型的智能翻译助手,其模块设计至关重要。为了保证翻译的高效性、准确性与可扩展性,系统需要一个结构清晰、功能强大的模块化设计。本文将对 OpenAI-Translator 的各个模块进行详细解析,涵盖其核心功…...
数据分析 变异系数
目录 变异系数的应用场景包括: 特点: 注意事项: np.nanvar——方差,np.sanstd标准差 简单来讲就是平均值/标准差 变异系数(Coefficient of Variation, CV)是一种相对量的变异指标,常用于衡…...
C语言——编译与链接
目录 前言 一程序的两种环境 1翻译环境 2执行环境 二预处理 1预处理符号 2#define 2.1#define 定义标识符 2.2#define 定义宏 2.2.1#和## 2.3带副作用的宏参数 2.4宏和函数的比较 2.5命名约定 3#undef 4命令行定义 5条件编译 5.1单分支 5.2多分支 5.3判断是…...
NewStar CTF week1 web wp
谢谢皮蛋 做这题之前需要先去学习一些数据库的知识 1 order by 2 1可以理解为输入的id,是一个占位符,按第二列排序用来测试列数,如果没有两列则会报错-1 union select 1,2 -1同样是占位符,union的作用是将注入语句合并到原始语句…...
Android BitmapShader简洁实现马赛克,Kotlin(一)
Android BitmapShader简洁实现马赛克,Kotlin(一) 这一篇, Android使用PorterDuffXfermode模式PorterDuff.Mode.SRC_OUT橡皮擦实现马赛克效果,Kotlin(3)-CSDN博客 基于PorterDuffXfermode实现马…...
NavVis手持激光扫描帮助舍弗勒快速打造“数字孪生”工厂-沪敖3D
在全球拥有近100家工厂的舍弗勒,从2016年开启数字化运营进程,而当前制造、库存、劳动力和物流的数字化,已无法支持其进一步简化工作流程,亟需数字化物理制造环境,打造“数字孪生”工厂。 NavVis为其提供NavVis VLX 3…...
web服务器 网站部署的架构
WEB服务器工作原理 Web web是WWW(World Wide Web)的简称,基本原理是:请求(客户端)与响应(服务器端)原理,由遍布在互联网中的Web服务器和安装了Web浏览器的计算机组成 客户端发出请求的方式:地址栏请求、超链接请求、表单请求 …...
ecovadis验厂相关要求
EcoVadis验厂的相关要求主要包括以下几个方面: 一、企业基本资质要求 合法注册与运营:企业必须是合法注册并运营的法人实体,具备合法的经营资质,如营业执照、税务登记证等。无严重违法记录:在过去三年内,…...
SSM开发(一)JAVA,javaEE,spring,springmvc,springboot,SSM,SSH等几个概念区别
目录 JAVA 框架 javaEE spring springmvc springboot SSM SSH maven JAVA 一种面向对象、高级编程语言,Python也是高级编程语言;不是框架(框架:一般用于大型复杂需求项目,用于快速开发)具有三大特性,所谓Jav…...
Spring Boot中选择性加载Bean的几种方式
说明:用过Spring框架的都知道其自动装配的特性,本文介绍几种选择性加载Bean的方式。Spring自动装配参考以下两篇文章: 基于SpringBoot的三层架构开发&统一响应结果 SpringBoot自动装配原理简单分析 ConditionalOnProperty Conditiona…...
【JVM】垃圾收集器详解
你将学到 1. Serial 收集器 2. ParNew 收集器 3. Parallel Scavenge 收集器 4. Serial Old 收集器 5. Parallel Old 收集器 6. CMS 收集器 7. G1 收集器 在 Java 中,垃圾回收(GC)是自动管理内存的一个重要机制。HotSpot JVM 提供了多种…...
【实用技能】如何在Stimulsoft产品中使用用户函数,快速创建报表及仪表盘
Stimulsoft Ultimate (原Stimulsoft Reports.Ultimate)是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能,Stimulsoft Ultimate包含了…...
MySQL四种隔离级别
MySQL的隔离级别是在事务这个大主题下面产生的说法。 那么什么是事务,事务就是一组sql语句,要么全部执行成功,要么都不执行,不能只执行成功其中的部分sql。事务的最终目的是为了保证数据库数据的完整性、一致性和可用性。 要保…...
Unity入门1
安装之后无法获得许可证,可以考虑重装 新建项目 单击空白处生成脚本 双击c#文件 会自动打开vstudio 检查引用 如果没有引用,重开vstu,或者重新加载项目 hierarchy层级 scenes场景 assets资产 inspector督察 icon图标 资源链接&…...
qml Loader详解
1、概述 QML Loader是Qt Quick框架中的一个关键元素,它允许开发者动态地加载和卸载QML组件。这种动态加载机制对于提升应用程序的性能、响应速度和用户体验至关重要。通过Loader,应用程序可以在需要时才加载特定的组件,而不是在启动时一次性…...
《安富莱嵌入式周报》第349期:VSCode正式支持Matlab调试,DIY录音室级麦克风,开源流体吊坠,物联网在军工领域的应用,Unicode字符压缩解压
周报汇总地址:嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版: 《安富莱嵌入式周报》第349期:VSCode正式支持Matlab调试,DIY录音室级麦克风…...
web端ActiveMq测试工具
如何用vue3创建简单的web端ActiveMq测试工具? 1、复用vue3模板框架 创建main.js,引入APP文件,createApp创建文件,并加载element插件,然后挂载dom节点 2、配置vue.config.js脚本配置 mport { defineConfig } from "vite&qu…...
1561. 你可以获得的最大硬币数目
class Solution:def maxCoins(self, piles: List[int]) -> int:piles.sort()res,n0,len(piles)for i in range(n//3):respiles[n-2-2*i]return res这里如果"你"想要获取最大,那么从最大的开始找 每隔俩算一个最大累计,Bob默认自己从最小那找…...
NIO | 什么是Java中的NIO —— 结合业务场景理解 NIO (二)
实时通信应用 的主流技术 并非NIO , 整理本文的目的是 更好的理解 NIO 。 在现代的 即时聊天应用中,使用 WebSocket、MQTT 或 SignalR 等协议更为普遍。 若您想了解 当前主流的有关 实时通信应用 的技术 , 请移步他文。 (一) 业务场景 实…...
GD32L233RB 驱动数码管
1.数码管有8段A、B、C、D、E、F、G 和 H小数点 以及片选信号(DIG) DIG用来选择那一位,A-G 用来显示段 静态显示每次只能一次显示单个位 动态显示(动态扫描)所有的位显示结束要在10ms左右 显示2ms 消光1ms 实…...
AIGC视频生成模型:Stability AI的SVD(Stable Video Diffusion)模型
大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本文详细介绍Stability AI的视频生成模型SVD(Stable Video Diffusion)模型,这家公司在图像生成领域富有盛名,开发并维护了知名开源项目SD系列…...
Linux 系统错误处理简介
Linux 系统错误处理简介 1. errno:错误代码的载体2. strerror():错误信息的翻译官3. perror():便捷的错误信息输出4. 系统调用与库函数的区别5. 错误处理的最佳实践 在 C/C 程序开发中,我们经常需要处理各种错误情况 Linux 系统提…...
systemC示例
main.cpp #include <memory> using namespace std; #include "top.h" int sc_main(int i, char *av[]) { // 关闭关于 IEEE 1666 标准中过时特性的警告 sc_report_handler::set_actions("/IEEE_Std_1666/deprecated", SC_DO_NOTHING); cout <…...
C++打字模拟
改进于 文宇炽筱_潜水 c版的打字效果_c自动打字-CSDN博客https://blog.csdn.net/2401_84159494/article/details/141023898?ops_request_misc%257B%2522request%255Fid%2522%253A%25227f97863ddc9d1b2ae9526f45765b1744%2522%252C%2522scm%2522%253A%252220140713.1301023…...
国产低功耗带LCD驱动和触摸按键功能的MCU
以下是国产低功耗、集成LCD驱动和触摸按键功能的MCU精选型号及其核心特性,结合性能、功耗和适用场景进行综合推荐: 1.灵动微MM32L0130系列 257 核心特性:低功耗:待机模式功耗低至100nA,支持多种低功耗模式。 LCD驱动&a…...
在 imx93 平台调试 nau88c10 声卡
一、环境介绍 linux 版本:6.6.52 soc:imx9331 codec:nau88c10 使用的内核文件为 Image,dtb 文件为:imx93-11x11-evk.dtb 二、硬件检查 i2s 信号线要接对 i2c 控制信号建议为 4.7k 上拉 codec 供电可以按参考设计…...
机器学习-分类算法评估标准
一. 准确率 accuracy 将预测结果和测试集的目标值比较,计算预测正确的百分比 准确率越高说明模型效果越好 from sklearn import datasets from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier #加载鸢尾花…...
美区TikTok解封后如何回归使用?
随着2025年初美区TikTok解封的消息引起了广泛关注,许多用户纷纷开始重新关注这一全球最受欢迎的短视频平台。在经历了数月的禁用期后,TikTok在美国市场的回归,代表了这一平台的巨大潜力和挑战。从用户的使用习惯,到平台的内容策略…...
行人识别检测数据集,yolo格式,PASICAL VOC XML,COCO JSON,darknet等格式的标注都支持,准确识别率可达99.5%
作者简介: 高科,先后在 IBM PlatformComputing从事网格计算,淘米网,网易从事游戏服务器开发,拥有丰富的C,go等语言开发经验,mysql,mongo,redis等数据库,设计模…...
grafana + Prometheus + node_exporter搭建监控大屏
本文介绍生产系统监控大屏的搭建,比较实用也是实际应用比较多的方式,希望能够帮助大家对监控系统有一定的认识。 0、规划 grafana主要是展示和报警,Prometheus用于保存监控数据,node_exporter用于实时采集各个应用服务器的事实状…...
【腾讯云】docker创建网络遇到Unable to enable SKIP DNAT rule
docker创建网络遇到Unable to enable SKIP DNAT rule 背景 今天打算在服务器上安装es,但是在创建网络时,提示 Error response from daemon: Failed to Setup IP tables: Unable to enable SKIP DNAT rule: (iptables failed: iptables --wait -t nat -I DOCKER…...
DeepSeek R1模型解读与使用
DeepSeek在推出R1预览版两个月后,发布了R1的正式版本,并且开源了模型,开放了API调用。我们直接来解读一下这款模型。 这是官方的性能评测图。从左到右分别是DeepSeek-R1,o1正式版,32B蒸馏版R1,o1-mini&…...
AI新玩法:Flux.1图像生成结合内网穿透远程生图的解决方案
文章目录 前言1. 本地部署ComfyUI2. 下载 Flux.1 模型3. 下载CLIP模型4. 下载 VAE 模型5. 演示文生图6. 公网使用 Flux.1 大模型6.1 创建远程连接公网地址 7. 固定远程访问公网地址 前言 在这个AI技术日新月异的时代,图像生成模型已经成为了创意工作者和开发者手中…...
api开发如何确保通过非官方库解析口令的合法性?
通过非官方库解析淘宝口令可能存在违反淘宝平台规则以及法律法规的风险,很难完全确保其合法性。如果确实有需求,可从以下几个方面尽量降低风险,提高合法性: 了解法律法规 《中华人民共和国网络安全法》:需确保解析行为…...
第6章 ThreadGroup详细讲解(Java高并发编程详解:多线程与系统设计)
1.ThreadGroup 与 Thread 在Java程序中, 默认情况下, 新的线程都会被加入到main线程所在的group中, main线程的group名字同线程名。如同线程存在父子关系一样, Thread Group同样也存在父子关系。图6-1就很好地说明了父子thread、父…...
如何使用Python脚本将本地项目上传到 GitHub
前言 这里我们通过创建一个新的github仓库,来测试我们的脚本能否上传我们本地的项目,并且进行更新。首先你需要先安装 Git,关于这部分我好像没有记录过,这里我搜索看了一下,这篇博客写的Git安装详解应该是比较齐全的&…...
css动画水球图
由于echarts水球图动画会导致ios卡顿,所以纯css模拟 展示效果 组件 <template><div class"water-box"><div class"water"><div class"progress" :style"{ --newProgress: newProgress % }"><…...
Shellcode
什么是shellcode shellcode通常是软件漏洞利用过程中使用一小段机器代码 作用 1.启动shell,进行交互 2.打开服务器端口等待连接 3.反向连接端口 4.。。。 如何编写shellcode 1.设置rdi指向/bin/sh 2.rsi0,rdx0 3.rax0x3b 4.syscall进行系统调用 64位系统…...
Element使用表单重置如果不使用prop,重置无法生效
文章目录 为什么需要 prop?示例:使用 prop 的正确方式关键点总结 在 element-ui 的 el-form 组件中, prop 属性是与表单验证和表单字段绑定密切相关的,尤其在使用 resetFields() 重置表单数据时。 如果不使用 prop࿰…...
[Qt]系统相关-网络编程-TCP、UDP、HTTP协议
目录 前言 一、UDP网络编程 1.Qt项目文件 2.UDP类 QUdpSocket QNetworkDatagram 3.UDP回显服务器案例 细节 服务器设计 客户端设计 二、TCP网络编程 1.TCP类 QTcpServer QTcpSocket 2.TCP回显服务器案例 细节 服务器设计 客户端设计 三、HTTP客户端 1.HTTP…...
两台局域网电脑通过飞秋传输大文件失败的解决方案
问题描述: 局域网两台电脑之间传输大文件(超过20G),不想太复杂,就各装个飞秋。但是通过直接发送文件发现总是失败,一会就中断了。 解决方法: 主界面上有一个文件共享的按钮,通过文…...
安卓程序作为web服务端的技术实现(二):Room 实现数据存储
已经实现web服务器安卓程序作为web服务端的技术实现:AndServer 实现登录权限拦截-CSDN博客 现在需要和正常web项目类似,那么就需要操作数据库 一般web项目都是选择较为重型的数据库如MySQL,SQL server等 这里是安卓项目,我目前…...
代码工艺:实践 Spring Boot TDD 测试驱动开发
TDD 的核心理念是 “先写测试,再写功能”,其过程遵循一个严格的循环,即 Red-Green-Refactor: TDD 的流程 1. Red(编写失败的测试) 根据需求,先编写一个测试用例,描述期望的行为。…...
MySQL命令及用法(精华版)
目录 DDL(数据定义语言) 数据库操作 表操作 DML(数据操作语言) DQL(数据查询语言) 基本查询 条件查询 聚合函数 分组查询 排序查询 分页查询 DCL(数据控制语言) 用户…...
73,【5】BUUCTF WEB [网鼎杯 2020 玄武组]SSRFMe(未解出)
进入靶场 又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码又是代码 <?php // 检查 URL 是否为内部 IP 地址 function check_inner_ip($url) {// 使用正则表达式检查 URL 格式是否以 http、https、gopher 或 d…...
修改word的作者 最后一次保存者 总编辑时间 创建时间 最后一次保存的日期
作者: 1.打开word文件 2.点击左上角的文件 3.选项 4.用户信息 5.将用户信息中的 姓名改为你需要的名字 最后一次保存者 1.word重命名为.zip文件 2.docProps中有个core.xml 3.用记事本打开有个lastModifiedBy标签,将里面内容改为你需要的名字 总编辑时…...
深入MapReduce——引入
引入 前面我们已经深入了HDFS的设计与实现,对于分布式系统也有了不错的理解。 但HDFS仅仅解决了海量数据存储和读写的问题。要想让数据产生价值,一定是需要从数据中挖掘出价值才行,这就需要我们拥有海量数据的计算处理能力。 下面我们还是…...
Formality:不可读(unread)的概念
相关阅读 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482https://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 在Formality中有时会遇到不可读(unread)这个概念,本文就将对此…...
leetcode刷题记录(八十一)——236. 二叉树的最近公共祖先
(一)问题描述 236. 二叉树的最近公共祖先 - 力扣(LeetCode)236. 二叉树的最近公共祖先 - 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。百度百科 [https://baike.baidu.com/item/%E6%9C%80%E8%BF%91%E5%85%AC%E5%85%B…...