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 中创建 Spring 动画

使用 .animation() 修饰符，我们还可以创建 spring 动画。在这里，我们在 .animation() 方法中传递 spring() 方法，因此视图像 spring 一样动画。

语法

以下是语法 −

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 中配置动画

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