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时，它们应根据该视图的animation属性进行动画处理，但也应保留自己定义的动画。是否有一些关于动画以及它们之间的界限的文档，我在某个地方错过了？

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

SwiftUI视图层次结构中的较高动画会覆盖嵌套动画

1 个答案: