SwiftUI - 多動畫使用

---

---

在 SwiftUI 中，我們可以同時對檢視的多個屬性（例如縮放、不透明度、旋轉等）進行動畫處理。在這裡，我們將多個狀態更改（用於多個屬性）包裝在同一個修飾符中，無論是 `.withAnimation()` 還是 `.animation()`。這兩個修飾符都可以與單個或多個動畫一起使用。使用這些多個動畫，我們還可以為所有型別的檢視建立各種效果。

SwiftUI 中的多個隱式動畫

我們可以透過對每個屬性使用 `.animation()` 修飾符來隱式地為多個屬性設定動畫。當屬性更改狀態時，它會對指定的屬性進行動畫處理。

示例

在下面的程式中，我們將兩種隱式型別的動畫應用於橢圓。因此，當我們單擊按鈕時，橢圓會同時開始增大尺寸並旋轉。

import SwiftUI

struct ContentView: View {
   @State private var scale = false
   @State private var rotate = false
    
   var body: some View {
      VStack{
        Ellipse()
            .fill(.orange)
            .frame(width: 100, height: 110)
            .rotationEffect(.degrees(rotate ? 260 : 0))
            .scaleEffect(scale ? 3 : 1)
            .animation(.easeInOut(duration: 1), value: scale)
            .animation(.easeIn(duration: 1), value: rotate)
        
          Button("Click Me"){
             scale.toggle()
             rotate.toggle()
            }.font(.title2)
        }
    }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中的多個顯式動畫

我們可以透過使用 `.withAnimation()` 修飾符來顯式地為多個屬性設定動畫，其中此修飾符的閉包包含指定屬性的所有狀態更改。

示例

在下面的程式中，我們使用兩種不同的動畫（旋轉和移動）對文字“TutorialsPoint”進行動畫處理。在這裡，當我們單擊按鈕時，文字向右移動，1 秒後開始旋轉。

import SwiftUI
struct ContentView: View {
   @State private var move = false
   @State private var rotate = false
      
   var body: some View {
      VStack{
         Text("TutorialsPoint")
             .font(.headline)
             .foregroundStyle(.red)
             .bold()
             .rotationEffect(.degrees(rotate ? 260 : 0))
             .offset(x: move ? 150 : 0)
                  
         Button("Click Me"){
            withAnimation(.easeIn(duration: 1)){
               move.toggle()
         }
         withAnimation(.easeOut(duration:1).delay(0.5)){
            rotate.toggle()
            }
         }.font(.title2)
      }
   }
}
#Preview {
   ContentView()
}

輸出

SwiftUI 中多個檢視的動畫

在 SwiftUI 中，我們可以使用 `.animation()` 和 `.withAnimation()` 修飾符同時對多個檢視進行動畫處理。我們可以對檢視使用相同的 state 變數或不同的變數。現在讓我們討論如何透過以下示例來為多個檢視設定動畫。

示例

下面的 SwiftUI 程式對兩個檢視進行動畫處理：矩形檢視和文字檢視。這裡，兩個檢視都使用相同的 state 變數，這些狀態由 `.withAnimation()` 修飾符控制。縮放效果應用於矩形檢視，旋轉效果應用於文字檢視。

import SwiftUI

struct ContentView: View {
   @State private var myState = false    
   var body: some View {
      ZStack{
         // Animating rectangle view
         Rectangle().fill(.yellow).frame(width: 150, height: 50)
         // Here we apply scaling effect on the rectangle
         .scaleEffect(myState ? 0.8 : 2)
            
         // Animating Text View
         Text("TutorialsPoint").font(.largeTitle).foregroundStyle(.green)
         // Here we apply rotation effect on the text
         .rotationEffect(.degrees(myState ? 360 : 0))
        }.padding(30)
       
        Button("Click Me"){
           withAnimation(.easeInOut(duration: 1.4)){
                myState.toggle()
            }
        }.font(.title)
    }
}

#Preview {
   ContentView()
}

輸出