SwiftUI 嵌入時忽略堆疊屬性動畫

Question

通過示例，我們可以看到可以使用不同的動畫為不同的屬性設置動畫。 例如：

Button("Tap me") {self.isShowingRed.toggle()}
    .frame(width: 200, height: 200)
    .background(isShowingRed ? Color.red : Color.blue)
    .animation(.easeIn(duration: 2.5))
    .clipShape(RoundedRectangle(cornerRadius: isShowingRed ? 50 : 0))
    .animation(Animation.easeInOut(duration: 0.1).repeatCount(5))

此代碼將在 2.5 秒內將按鈕背景從紅色變為藍色，同時將圓角半徑從 0 變為 50，重復 5 次。

一旦嵌入視圖，問題就會出現：

VStack {
    Button("Tap me") {self.isShowingRed.toggle()}
        .frame(width: 200, height: 200)
        .background(isShowingRed ? Color.red : Color.blue)
        .animation(.easeIn(duration: 2.5))
        .clipShape(RoundedRectangle(cornerRadius: isShowingRed ? 50 : 0))
        .animation(Animation.easeInOut(duration: 0.1).repeatCount(5))
    } 
}

嵌入按鈕時，僅使用第一個 animation，在這種情況下，顏色和半徑都將在 2.5 秒內進行動畫處理，沒有重復。

即使我將按鈕設為單獨的組件，同樣的問題仍然存在。

我做錯了什么還是這是 SwiftUI 錯誤？

編輯：我正在使用 Xcode 11.1 並在模擬器上進行測試。

Answer 1

正如我所觀察到的，當存在.background 時發生意外情況時，問題就出在其中......在您的用例中，animation 必須應用於背景內容，這可以解決問題。

這是我使用的示例，它可以根據您的需要進行動畫處理，並且沒有容器。

import SwiftUI

struct TestButtonAnimation: View {
    @State private var isShowingRed = false
    var body: some View {
        VStack {
            Button("Tap me") {self.isShowingRed.toggle()}
                .frame(width: 200, height: 200)
                .background(
                    Group {isShowingRed ? Color.red : Color.blue}
                    .animation(.easeIn(duration: 2.5))
                )
                .clipShape(RoundedRectangle(cornerRadius: isShowingRed ? 50 : 0))
                .animation(Animation.easeInOut(duration: 0.1).repeatCount(5))
        }
    }
}

struct TestButtonAnimation_Previews: PreviewProvider {
    static var previews: some View {
        TestButtonAnimation()
    }
}

經測試：Xcode 11.1

Answer 2

您可以在容器中嘗試這種方式.animation(.default)

  var body: some View {
  VStack{
  Button("Tap me") {self.isShowingRed.toggle()}
 .frame(width: 200, height: 200)
 .background(isShowingRed ? Color.red : Color.blue)
 .animation(.easeIn(duration: 2.5))
.clipShape(RoundedRectangle(cornerRadius: isShowingRed ? 50 : 0))
.animation(Animation.easeInOut(duration: 0.1).repeatCount(5))
}.animation(.default)
}

Answer 3

更新到 Xcode 11.2.1 后，此問題已解決。