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秒内将按钮背景从红色动画为蓝色，同时通过5次重复将角半径从0设置为50。

嵌入视图后，问题立即出现：

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))
    } 
}

嵌入按钮时，仅使用第一个动画，在这种情况下，颜色和半径都将在2.5秒内进行动画处理，而不会重复。

即使我将按钮设为单独的组件，同样的问题仍然存在。

我是在做错什么，还是SwiftUI错误？

编辑：我正在使用Xcode 11.1并在模拟器上进行测试。

Answer 1

正如我观察到的那样，当.background发生意外事件时，问题就出在其中...在您的用例中，必须将动画应用于背景内容，这样才能解决问题。

这里是我使用的示例，它可以根据需要使用动画，并且不带容器。

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

嵌入时会忽略SwiftUI的堆叠属性动画

3 个答案: