如何动画删除使用 ForEach 循环创建的视图，从 SwiftUI 中的 ObservableObject 获取其数据

Question

该应用具有以下设置：

我的主视图使用 SwiftUI ForEach 循环创建标签云。 ForEach 从名为 TagModel 的 ObservableObject 的 @Published 数组中获取数据。使用 Timer，ObservableObject 每三秒向数组添加一个新标签。通过添加标签，ForEach 会再次触发并创建另一个 TagView。一旦将三个以上的标签添加到数组中，ObservableObject 就会从数组中删除第一个（最旧的）标签，而 ForEach 会删除特定的 TagView.

有以下问题：

TagViews 的创建工作完美。它还使用 TagView 的动画和 .onAppear 修饰符按照预期的方式进行动画处理。然而，当最旧的标签被删除时，它不会动画化它的删除。 .onDisappear 中的代码执行但 TagView 被立即删除。

我尝试了以下方法来解决问题：

我试图通过使用重复然后自动反转的动画，让 TagView 运行的整个出现和消失动画都在 .onAppear 中。它有点工作，但这样有两个问题。首先，如果动画时间太短，一旦动画结束并且 TagView 被移除，将在没有应用任何修饰符的情况下出现一小段时间，然后它将被移除。其次，如果我将动画持续时间设置得更长，则 TagView 将在动画完成之前被删除。为了让它工作，我需要非常精确地确定动画的移除时间和持续时间，这将使 TagView 非常依赖于 Timer 而这似乎不是很好的解决方案。

我尝试的另一个解决方案是使用 @Environment(\.presentationMode) 变量找到类似于 self.presentationMode.wrappedValue.dismiss() 的东西，并以某种方式让 TagView 在 .onAppear 动画结束后自行删除。但这仅在视图已在导航堆栈中创建并且我找不到任何其他方法让视图自行销毁时才有效。我还认为一旦 TagModel 更新它的数组就会再次引起问题。

我读了其他几本S.O。指向 ForEach 循环中数据枚举的解决方案。但是我将每个 TagView 创建为它自己的对象，我认为这不应该是问题所在，而且我不确定如果这是问题的一部分我将如何实现它。

这是我的应用程序的简化代码，可以在 iOS 单视图 SwiftUI 项目中运行。

import SwiftUI

struct ContentView: View {
    private let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
    @ObservedObject var tagModel = TagModel()
    
    var body: some View {
        ZStack {
            ForEach(tagModel.tags, id: \.self) { label in
                TagView(label: label)
            }
            .onReceive(timer) { _ in
                self.tagModel.addNextTag()
                if tagModel.tags.count > 3 {
                    self.tagModel.removeOldestTag()
                }
            }
        }
    }
}

class TagModel: ObservableObject {
    @Published var tags = [String]()
    
    func addNextTag() {
        tags.append(String( Date().timeIntervalSince1970 ))
    }
    func removeOldestTag() {
        tags.remove(at: 0)
    }
}

struct TagView: View {
    @State private var show: Bool = false
    @State private var position: CGPoint = CGPoint(x: Int.random(in: 50..<250), y: Int.random(in: 10..<25))
    @State private var offsetY: CGFloat = .zero
    
    let label: String
    
    var body: some View {
        let text = Text(label)
            .opacity(show ? 1.0 : 0.0)
            .scaleEffect(show ? 1.0 : 0.0)
            .animation(Animation.easeInOut(duration: 6))
            .position(position)
            .offset(y: offsetY)
            .animation(Animation.easeInOut(duration: 6))
            .onAppear() {
                show = true
                offsetY = 100
            }
            .onDisappear() {
                show = false
                offsetY = 0
            }
        return text
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

不清楚您尝试实现哪种效果，但是在删除时您应该为视图内部而不是视图本身设置动画，即。在父级中，因为视图在那里作为一个整体删除。

类似的东西（只是指示在哪里进行实验）：

var body: some View {
    ZStack {
        ForEach(tagModel.tags, id: \.self) { label in
            TagView(label: label)
                .transition(.move(edge: .leading))    // << here !! (maybe asymmetric needed)
        }
        .onReceive(timer) { _ in
            self.tagModel.addNextTag()
            if tagModel.tags.count > 3 {
                self.tagModel.removeOldestTag()
            }
        }
    }
    .animation(Animation.easeInOut(duration: 1))    // << here !! (parent animates subview removing)

如何动画删除使用 ForEach 循环创建的视图，从 SwiftUI 中的 ObservableObject 获取其数据

How to animate the removal of a view created with a ForEach loop getting its data from an ObservableObject in SwiftUI

swift

animation

foreach

swiftui

observableobject