Play all audios:
實現 SwiftUI 動畫時，modifier 的變化要在 view 已經加到畫面上後發生彼得潘的 iOS App NeverlandFollow3 min read·Jun 13, 2021 --
Share
SwiftUI 可以很方便地製作動畫效果，利用 modifier 的變化，SwiftUI 將能幫我們製造變化過程中的動畫。
比方以下例子，按下Peter 轉轉轉後，圖片的旋轉角度從原本的 0 度變成 70 度，因此圖片將以動畫的方式從 0 度轉到 70 度。
struct ContentView: View { @State private var rotate = false var body: some View { VStack { Image("peter") .rotationEffect(.degrees(rotate ? 70 : 0)) Text("Peter 轉轉轉") .font(.largeTitle)
.onTapGesture { withAnimation { rotate = true } } } }}問題 不過有一點要特別注意，modifier 的變化要在 view 已經加到畫面上後發生，才會產生動畫效果，讓我們用以下例子說明。
struct ContentView: View { @State private var show = false var body: some View { VStack { if show { Image("peter") .rotationEffect(.degrees(show ? 70 : 0)) } Text("Peter 轉轉轉")
.font(.largeTitle) .onTapGesture { withAnimation { show = true } } } }} 當我們按下 Peter 轉轉轉時，只有文字會有向下移動的動畫，圖片則會立即出現並轉到 70 度，沒有任何旋轉的動畫。為什麼會這樣呢? 因為當我們按下 Peter 轉轉轉時圖片才加到畫面上，此時它在畫面上的角度是 70 度，它沒有任何
modifier 的變化，它一出現就是 70 度，並不是從 0 度變到 70 度。
解法: 設定透明度 讓圖片一開始就在畫面上，但是將它的 opacity 設為 0，讓它變成隱藏。當我們按下 Peter 轉轉轉時，圖片的 opacity 從 0 變 1，旋轉角度從 0 度變 70 度，因此將順利出現圖片淡入和旋轉的動畫。
struct ContentView: View { @State private var show = false var body: some View { VStack { Image("peter") .opacity(show ? 1 : 0) .rotationEffect(.degrees(show ? 70 : 0)) Text("Peter 轉轉轉")
.font(.largeTitle) .onTapGesture { withAnimation { show = true } } } }}