苹果开发者入门：修复 SwiftUI 中“跑偏的”动画（下）

在这里插入图片描述

概述

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

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

在本篇博文中，您将学到如下内容：

概述
2. “画蛇添足”的移动
3. “拨云见日”：洞悉问题的根本原因
总结

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

那还等什么呢？Let’s go！！！😉

2. “画蛇添足”的移动

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

在这里插入图片描述

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

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

在这里插入图片描述

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

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

3. “拨云见日”：洞悉问题的根本原因

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

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 视图即可：

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)