SwiftUI - 动画

动画是在视图状态发生变化时对屏幕上视图进行动画处理的过程。它可以通过视觉方式反映视图的变化，从而创建有吸引力的用户界面。因此，在本章中，我们将学习 SwiftUI 中动画的基础知识。

SwiftUI 中的动画

SwiftUI 对动画提供了良好的支持。借助动画，我们可以在视图或组件或布局的状态发生变化时，轻松地在视图中创建流畅的视觉过渡。由于 SwiftUI 的声明式方法，我们可以根据视图状态的变化来动画化大小、颜色、不透明度、位置等属性。

在 SwiftUI 中，我们可以使用以下方法创建动画 -

withAnimation(_:_:_) 方法： 用于创建基于状态的动画。它允许您指定动画类型并在状态变量更改其状态时执行动画。
animation(:value:) 方法： 用于将动画插入到特定视图中，这意味着当视图的状态被修改时，它会自动为指定的视图设置动画。

SwiftUI 中的动画类型

SwiftUI 支持以下类型的动画

隐式动画：此动画为视图提供预定义的动画。因此，每当状态发生变化时，视图都会进行动画处理，它会自动工作，这意味着我们不需要为每个动画帧指定。这种类型的动画是通过使用 .animation() 方法实现的。
显式动画：它用于创建仅更改给定视图中存在的指定属性的动画。我们可以借助 withAnimation() 方法实现显式动画。它为我们提供了对动画的更多控制。
动画曲线：它提供各种类型的动画曲线，例如 .easeIn、.easeOut、.easeInOut 和 .linear。它们通常用于控制动画视图的速度。
弹簧动画：这是一种特殊的动画类型，用于创建弹簧运动。
重复动画：这是一种用于创建重复特定次数的动画的动画类型。
状态驱动的动画：众所周知，在 SwiftUI 中，动画由 @State 或其他动态属性的变化触发，因此每当状态变量的值发生变化时，视图的相应属性将更新并且过渡将被动画化。

使用动画的好处

以下是使用动画将获得的一些关键好处 -

动画通过创建更清晰、更具交互性的应用程序界面来增强应用程序的可用性。
动画向用户提供对他们操作的即时且清晰的响应，并减少任何混淆。
应用程序中精心设计的动画可以增强用户参与度。
动画可以帮助开发人员将更多注意力放在应用程序的重要部分上。
动画在状态之间移动时提供更流畅的过渡效果。

SwiftUI 中的嵌套动画

SwiftUI 通过 withAnimation() 方法支持嵌套动画。使用它，我们可以将多个动画应用于一个视图。我们还可以通过嵌套两个或多个动画来创建特殊效果。

语法

以下是语法 -

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

示例

以下 SwiftUI 程序用于创建嵌套动画。此处，外部 withAnimation() 负责圆形的缩放，内部 withAnimation() 负责颜色的变化。

import SwiftUI

struct ContentView: View {
   @State private var scale = false
   @State private var color = false

   var body: some View {
      VStack{
         Circle()
            .stroke(color ? Color.blue: Color.red, lineWidth: 6)
            .frame(width: 160)
            .scaleEffect(scale ? 1.7 : 1.1)
            .padding(10)
         Button("Click"){
            withAnimation(.easeInOut(duration: 8.0)){
               scale.toggle()
               withAnimation(.easeInOut(duration: 1.1)){
                  color.toggle()
               }
            }
         }.font(.title2)
      }
   }
}

#Preview {
   ContentView()
}

输出

SwiftUI 中的定时曲线

定时曲线用于使用不同的定时阶段（例如开始、中间和结束）来自定义动画的速度。它允许我们控制动画如何在屏幕上移动。为了控制动画的速度，SwiftUI 提供了一个名为 timingCurve() 的内置修饰符。timingCurve() 修饰符根据给定的点对创建的动画进行动画处理。

语法

以下是语法 -

static func timingCurve(
   _ p1x: Double,
   _ p1y: Double,
   _ p2x: Double,
   _ p2y: Double,
   duration: TimeInterval = 0.35
) -> Animation

参数

以下是参数 -

p1x：表示曲线的控制点的第一个 x 坐标。
p1y：表示曲线的控制点的第一个 y 坐标。
p1x：表示曲线的控制点的第二个 x 坐标。
p1y：表示曲线的控制点的第二个 y 坐标。
duration：表示动画的持续时间（以秒为单位）。

示例

在以下 SwiftUI 程序中，我们将根据自定义定时曲线对圆形进行动画处理。

import SwiftUI
struct ContentView: View {
   @State private var move = false
   
   var body: some View {
      VStack{
         Circle()
            .stroke(.red, lineWidth: 6)
            .frame(width: 160)
            .offset(x : move ? 160 : -130)
            .animation(.timingCurve(0.67, -0.54, 0.28, 1.34, duration: 2), value: move)
         Button("Click"){
            move.toggle()
         }.font(.title2)
      }
   }
}
#Preview {
   ContentView()
}

输出

打印页面