苹果开发者入门:修复 SwiftUI 中“跑偏的”动画(下)

概述

大家知道 SwiftUI 不仅仅是一款 App 界面布局的超级利器,它同样提供了花样百出的动画和转场机制将 UI 世界点缀的"楚楚动人"。不过,对于苹果开发新入门的秃头小码农来说,使用动画貌似没有想象的那么易如反掌。

如上图所示,在游戏成功和失败时红色圆形到图片的转变并没有产生任何动画效果,这是怎么回事儿?又该如何解决呢?

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

  • 概述
  • [2. "画蛇添足"的移动](#2. “画蛇添足”的移动)
  • [3. "拨云见日":洞悉问题的根本原因](#3. “拨云见日”:洞悉问题的根本原因)
  • 总结

相信学完本课后,大家会对 SwiftUI 动画及转场的使用重拾自信,并且发出"原来动画是如此多娇"的感叹。

那还等什么呢?Let's go!!!😉


2. "画蛇添足"的移动

现在,编译并刷新 Xcode 预览即可发现,我们的转场动画终于又回来了:

不过,上面转场动画的效果好像有点怪怪的:成功或失败图片的转场不是从红色圆形的位置,而是从视图左上角"飘"过去的。

让我们用慢动作仔细观察一下这个结果:

这样"飘忽不定"的视图行为大概不是我们想要的。

那么为什么会这样?我们又该如何解决呢?

3. "拨云见日":洞悉问题的根本原因

回到之前的代码里,可以清楚的看到我们在 Group 视图上应用了 offset 修改器:

swift 复制代码
Group {
    if isTimeOver {
        Image("BulletHole")
            .resizable()
            .frame(width: info.dia, height: info.dia)
            .transition(.scale.animation(.bouncy))
    } else if success {
        Image("Sushi")
            .resizable()
            .frame(width: info.dia, height: info.dia)
            .transition(.scale.animation(.bouncy))
    } else {
        Jail(info: $info)
            .transition(.identity)
    }
}
.offset(info.offset)

这样做的目的是将各个"监狱"放在屏幕的不同位置上:

不过如此一来,"监狱"视图的 offset 位移属性也会参与到转场动画的计算中去,这就是为什么它们会"飘"过去的根本原因。

所幸的是,有一种极其简单的方法可以帮助我们完美解决这个问题:将视图转场动画"限制"在它局部的坐标系中。

简单来说,我们只需要用 ZStack 代替原来的 Group 视图即可:

swift 复制代码
ZStack {
    if isTimeOver {
        Image("BulletHole")
            .resizable()
            .frame(width: info.dia, height: info.dia)
            .transition(.scale)
    } else if success {
        Image("Sushi")
            .resizable()
            .frame(width: info.dia, height: info.dia)
            .transition(.scale)
    } else {
        Jail(info: $info)
            .transition(.identity)
    }
}
.offset(info.offset)
.animation(.bouncy, value: success)
.animation(.bouncy, value: isTimeOver)

从上面代码可以看到,现在位移的改变是在 ZStack 容器上,而其内部子视图的转场动画皆会与此"毫无瓜葛":

现在,我们通过溯本回原找到了问题的根本原因,并"对症下药"轻而易举的解决了它,棒棒哒!💯


想要进一步系统地学习 Swift 开发的小伙伴们,可以来我的《Swift 语言开发精讲》专栏逛一逛哦:


总结

在本篇博文中,我们通过一个"小栗子"介绍了 SwiftUI 动画效果中潜在不尽如人意的地方,并深挖内在原因给出了简单的修复方案。

感谢观赏,再会喽!😎

相关推荐
yingxiao8883 天前
日本移动应用市场营销分析:娱乐和金融应用增长强劲,游戏类广告支出最高!
游戏·动画·业界资讯
大熊猫侯佩3 天前
当液态玻璃计划遭遇反叛者:一场 iOS 26 界面的暗战
swiftui·xcode·apple
雪糕吖4 天前
SwiftUI 自定义 Shape:实现顶部圆角矩形 RoundedTopRectangle
ios·swiftui
xhload3d6 天前
场景切换 × 流畅过渡动画实现方案 | 图扑软件
物联网·3d·智慧城市·html5·动画·webgl·数字孪生·可视化·虚拟现实·工业互联网·工控·工业·2d·轻量化·过渡动画
东坡肘子6 天前
写给这段旅程,也写给未来的自己 | 肘子的 Swift 周报 #0100
swiftui·swift·apple
大熊猫侯佩11 天前
SwiftUI 三阵诀:杨过绝情谷悟 “视图布阵” 之道
swiftui·swift·apple
东坡肘子13 天前
未来将至:人形机器人运动会 | 肘子的 Swift 周报 #099
swiftui·swift·apple
吴Wu涛涛涛涛涛Tao16 天前
基于TCA构建Instagram克隆:SwiftUI状态管理的艺术
ios·swiftui
麦兜*18 天前
Swift + Xcode 开发环境搭建终极指南
开发语言·ios·swiftui·xcode·swift·苹果vision pro·swift5.6.3
CG_MAGIC19 天前
主流 3D 模型格式(FBX/OBJ/DAE/GLTF)材质支持与转换操作指南
3d·渲染·动画·材质·贴图·3d 模型格式·材质支持与转换操作指南