SwiftUI - 创建显式动画

显式动画允许我们明确定义如何在给定视图上使用何种类型的动画以及何时使用。它为开发者提供了手动控制权，以便他们能够更好地控制动画。使用显式动画，我们可以轻松地将两个或多个动画混合在一起，从而在简单和复杂的视图上创建新的效果。在 SwiftUI 中，我们可以使用 .withAnimation() 修饰符创建显式动画。

“.withAnimation()” 修饰符

“.withAnimation()” 修饰符用于在状态更改时为给定视图中存在的所有组件设置动画。或者我们可以说，它会根据在 withAnimation() 代码块中定义的状态更改代码自动为给定视图的过渡设置动画。它允许我们根据需要手动控制动画。

语法

以下是语法 -

func withAnimation<Result>(
   _animation: Animation? = .default,
   _body: () throws -> Result
)rethrows -> Result

示例 1

以下 SwiftUI 程序用于创建显式动画。在这里，我们通过单击按钮来更改矩形的透明度。

import SwiftUI

struct ContentView: View {
   @State private var myOpacity = false
   var body: some View {
      Rectangle()
         .frame(width: 150, height: 100)
         .opacity(myOpacity ? 0.2 : 2)
      Button("Change Opacity"){
         withAnimation(.easeInOut(duration: 1.3)){
            myOpacity.toggle()
         }
      }.font(.largeTitle).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

输出

示例 2

以下 SwiftUI 程序用于线性运行卡车。

import SwiftUI

struct ContentView: View {
   @State private var run = false
   var body: some View {
      Image(systemName: "box.truck")
         .font(.largeTitle)
         .foregroundColor(.green)
         .offset(x: run ? 1400 : -140, y: 0)
      Button("Run The Truck"){
         withAnimation(.linear(duration: 0.9)){
            run.toggle()
         }
      }.font(.title2).foregroundStyle(.brown)
   }
}
#Preview {
   ContentView()
}

输出

隐式动画与显式动画

众所周知，在 SwiftUI 中，我们可以创建两种不同类型的动画：隐式动画和显式动画。这两种动画都会为视图设置动画，但它们仍然存在一些差异，差异如下 -