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

【问题标题】：Animations higher in the SwiftUI view hierarchy overriding nested animationsSwiftUI 视图层次结构中较高的动画覆盖嵌套动画
【发布时间】：2020-07-18 11:17:50
【问题描述】：

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

【问题讨论】：

标签： swift swiftui

【解决方案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
      }
  }

【讨论】：