SwiftUI - 创建动画

---

---

动画是创建具有吸引力的 SwiftUI 用户界面的最强大的工具。它以各种方式为视图添加动画。在 SwiftUI 中，我们可以通过两种方式创建动画：隐式动画和显式动画。隐式动画是在视图状态发生变化时自动处理动画的动画，而显式动画则用于显式创建动画。因此，本章我们将学习如何隐式创建动画。

`.animation()` 修饰符

在 SwiftUI 中，我们可以借助 `.animation()` 修饰符来应用动画。`.animation()` 修饰符用于将指定的动画应用于给定的视图，并且只要修饰符中指定的值发生变化，视图就会进行动画处理。这是一种隐式动画。

语法

以下是语法：

func animation<V>(_animation:Animation?,
    value: V) -> some View where V : Equatable

参数

此方法接受以下参数：

animation: 表示我们要应用于视图的动画。如果此参数的值为 nil，则视图不会进行动画处理。此参数的值可以是以下值之一：

• default: 用于默认动画。

• linear: 创建以恒定速度移动的动画。

• easeIn: 创建一个动画，该动画开始缓慢，但当它到达运动结束时速度会加快。

• easeOut: 创建一个动画，该动画开始快速，但当它到达运动结束时速度会减慢。

• easeInOut: 创建一个具有 easeIn 和 easeOut 动画特性的动画。

• bouncy: 创建弹跳动画。

• smooth: 创建无弹跳动画。

• snappy: 创建快速动画。

• spring: 创建弹簧动画。

• interactiveSpring: 创建持续时间较短的弹簧动画。

• interpolatingSpring: 创建一个弹簧动画，该动画使用阻尼弹簧模型来生成 1 到 0 之间的数值。

value: 表示将触发动画的值。

在 SwiftUI 中创建基本动画

要创建基本动画，请按照以下步骤操作：

步骤 1：创建一个新项目 - 要创建一个新项目，请打开 Xcode，然后创建一个新的 SwiftUI 项目。

步骤 2：创建动画 - 现在，借助 `.animation()` 方法，我们将创建一个简单的动画。

示例

以下 SwiftUI 程序用于创建简单的动画。在这里，当我们点击按钮时，按钮的大小会增加。

import SwiftUI

struct ContentView: View {
   @State private var size = 3.3
   var body: some View {
      Button("Click Me"){
         size += 3
      }.frame(width: 100, height: 200)
      .background(Circle().fill(.mint))
      .scaleEffect(size)
      .animation(.easeOut, value: size)
   }
}
#Preview {
   ContentView()
}

输出

在 SwiftUI 中创建弹簧动画

使用 `.animation()` 修饰符，我们还可以创建弹簧动画。在这里，我们将 spring() 方法传递给 `.animation()` 方法，因此视图会像弹簧一样进行动画处理。

语法

以下是语法：

func spring(
   duration: TimeInterval = 0.5,
   bounce: Double = 0.0,
   blendDuration: Double = 0
) -> Animation

参数

此方法接受以下参数，使用这些参数我们可以控制弹簧动画：

• duration: 定义弹簧的振荡周期。

• bounce: 定义弹簧的弹跳程度。这里 0 表示无弹跳，正值表示弹性增加，负值表示过度阻尼弹簧。

• blendDuration: 定义插值变化的秒数。

示例

以下 SwiftUI 程序用于创建弹簧动画。

import SwiftUI

struct ContentView: View {
   @State private var size = false
   var body: some View {
      VStack{
         Rectangle()
            .stroke(.blue)
            .frame(width: size ? 200 : 100, height: size ? 90 : 50)
            .animation(.spring(duration: 0.2, bounce: 0.1, blendDuration: 1), value: size)
         Button("Click to See Magic"){
            size.toggle()
         }.foregroundColor(.red)
      }
   }
}
#Preview {
   ContentView()
}

输出

在 SwiftUI 中配置动画

借助以下方法，我们可以轻松配置动画：

名称	描述
delay()	它用于将动画的开始延迟给定数量的秒数。
repeatCount()	它用于根据给定的次数重复指定的动画。
repeatForever()	它用于无限重复指定的动画。
speed()	它用于控制动画的速度。