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 后，此问题已解决。