广州建网站定制,工程招标信息网,网站建设评审会总结发言,C wordpress 分类概述
秃头小码农们都知道#xff0c;SwiftUI 不仅仅是一个静态 UI 构建框架那么简单#xff0c;辅以海量默认或自定义的动画和过渡#xff08;Transition#xff09;特效#xff0c;我们可以将 App 界面的绚丽升华到极致。 不过#xff0c;目前 SwiftUI 中的过渡#x…
概述
秃头小码农们都知道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 过渡动画在什么场景下可能会掉链子并用一招将其彻底驯服。
感谢观赏再会啦
