在SwiftUI视图层次结构中，位于较高层次的动画会覆盖嵌套动画。

Question

我有一个SwiftUI的View，其中包含一个在onAppear中重复出现的动画。当该视图在包含另一个动画的视图层次结构中使用时，较高级别的动画会覆盖嵌套的动画。请考虑以下基本示例：

struct Example: View {
  @State private var opacity: Double = 0

  var body: some View {
    Text("Example")
      .opacity(opacity)
      .onAppear() {
        withAnimation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
          self.opacity = 1
        }
      }
  }
}

在类似以下的情境中使用时，这种重复动画不会运行。如果从此堆栈中移除动画，则重复动画将按预期工作。

struct Parent: View {
  var body: some View {
    VStack {
      Example()
    }
    .animation(.easeInOut)
  }
}

我该如何构建结构以使两种动画都可以运行？当子视图添加到 VStack 时，它们应该按照该视图的动画属性进行动画处理，但是它们也应保留自己定义的动画。是否有一些关于动画和它们之间边界的文档我错过了？

- James Allardice

Answer 1

您需要将内部动画与特定状态变量链接，然后它将变得独立。

已在Xcode 12 / iOS 14上进行测试

  var body: some View {
    Text("Example")
      .opacity(opacity)
      .animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true), 
          value: opacity)            // << here !!
      .onAppear() {
          self.opacity = 1
      }
  }

- Asperi