SwiftUI：创建隐式动画

Animation-iPhone

动画： 介绍

我们回到另一个技术项目，这次我们将要看的是快速，精美且真正被低估的东西：动画 Animation。

出现动画的原因有很多，其中之一绝对是使我们的用户界面看起来更好。但是，它们也可以帮助用户了解我们程序的运行情况：当一个窗口消失而另一窗口滑入时，用户可以清楚地看到另一个窗口去了哪里，这也意味着他们可以清楚地看到它从那个地方回来。

在这个技术项目中，我们将研究SwiftUI的一系列动画和过渡。有些很简单——实际上，您几乎可以立即获得出色的成绩！但是有些需要更多的思考。不过，所有这些功能都将非常有用，特别是在您努力确保您的应用程序具有吸引力并尽可能地引导用户的视线时。

与以往一样，在Xcode项目中工作是个好主意，这样您就可以看到自己的代码，因此，请创建一个名为Animations的新Single View App项目。

创建隐式动画

在SwiftUI中，最简单的动画类型是隐式动画：我们提前告知我们的视图“如果有人想让你动起来，这就是你应该如何回应”，仅此而已。然后，SwiftUI将确保确保按照您请求的动画进行任何更改。在实践中，这使动画变得微不足道——从字面上看，这再简单不过了。

让我们从一个例子开始。这段代码显示了一个简单的红色按钮，没有任何动作，使用了50个填充点和一个圆形的剪辑形状：

Button("Tap Me") {
    // do nothing
}
.padding(50)
.background(Color.red)
.foregroundColor(.white)
.clipShape(Circle())

我们想要的是使该按钮每次被点击时都会变大，我们可以使用一个名为scaleEffect（）的新修饰符来做到这一点。您为此提供一个从0开始的值，它将以该大小进行绘制——值1.0等于100％，即按钮的正常大小。

因为我们想在每次点击按钮时更改比例效果值，所以我们需要使用@State属性，但是这里有一个陷阱：由于历史原因，主要是与Apple的旧API交互的原因，我们需要使用特定的数据类型称为CGFloat。

出于所有意图和目的，CGFloat都是Double的不同名称，但是在较旧的硬件上，CGFloat使用的数字存储类型较小，称为Float。以前，当这种选择很重要时，CGFloat允许Apple不在乎我们要构建哪种类型的硬件，但是如今，几乎所有产品都使用Double，因此，这只是一件让我们厌恶的遗产。

无论如何，所有这些都很重要，因为如果我们使属性var animationAmount = 1，我们将得到一个整数；如果我们使用var animationAmount = 1.0，那么我们将得到一个Double，但是没有内置的方法可以自动获取CGFloat ——我们需要使用类型注释。

因此，请立即将此属性添加到您的视图中：

@State private var animationAmount: CGFloat = 1

现在，通过添加以下修饰符，可以使按钮将其用于缩放效果：

.scaleEffect(animationAmount)

最后，在点击按钮时，我们希望将animationAmount增加1，因此可将其用于按钮的操作：

self.animationAmount += 1

如果您运行该代码，将会看到您可以反复点击按钮以使其按比例放大。不会以越来越高的分辨率重新绘制它，因此，随着按钮变大，您会看到它有点模糊，但这没关系。

现在，人眼对运动非常敏感——我们非常擅长检测事物何时运动或改变其外观，这使动画变得如此重要和令人愉悦。因此，我们可以要求SwiftUI为所做的更改创建一个隐式动画，以便通过向按钮添加animation（）修饰符来顺利进行所有缩放：

.animation(.default)

这要求SwiftUI提供默认动画，然后您会立即发现点击按钮会使其随动画放大。

该隐式动画会对更改后的视图的所有属性生效，这意味着，如果我们将更多动画修改器附加到视图，则它们将一起更改。例如，我们可以在按钮.blur（）上添加第二个新的修饰符，它使我们可以添加具有特殊半径的高斯模糊：

.blur(radius: (animationAmount - 1) * 3)

半径（animationAmount-1）* 3表示模糊半径将从0开始（无模糊），但是在您点击按钮时移至3点，6点，9点，甚至更高。

如果再次运行该应用程序，您会发现它现在可以平滑缩放和模糊。

关键是，我们没有说过动画的每一帧应该是什么样子，甚至什至没有说过SwiftUI应该何时开始和结束动画。相反，我们的动画就像视图本身一样，成为我们状态的函数。

译自
Animation: Introduction
Creating implicit animations

Previous: Word Scramble 项目——挑战	Hacking with iOS: SwiftUI Edition	Next: 自定义动画

赏我一个赞吧~~~