swift - 如何动画移除使用 ForEach 循环创建的 View 从 SwiftUI 中的 ObservableObject 获取其数据

Question

该应用程序具有以下设置:
我的主 View 使用 SwiftUI 创建标签云 ForEach环形。ForEach从 @Published 获取其数据ObservableObject 的数组叫 TagModel .使用 Timer , 每三秒 ObservableObject向数组添加一个新标签。
通过添加标签 ForEach再次被触发并创建另一个 TagView .一旦超过三个标签被添加到数组中，ObservableObject从数组中删除第一个(最旧的)标签，ForEach 删除该特定 TagView .
遇到以下问题:
TagViews 的创建工作完美。它还使用 TagView 的动画和 .onAppear 修饰符以应有的方式进行动画处理。 .然而，当最旧的标签被移除时，它不会对其移除进行动画处理。 .onDisappear中的代码执行但 TagView立即被删除。
我尝试了以下方法来解决这个问题:
我试图让TagView整个出现和消失的动画在 .onAppear 内运行通过使用重复然后自动反转的动画。
它有点工作，但这样有两个问题。
首先，如果动画时间太短，一旦动画结束，TagView被删除，将在没有应用任何修饰符的情况下显示一小会，然后将被删除。
其次，如果我将动画持续时间设置得更长 TagView将在动画完成之前移除。
为了让它起作用，我需要非常精确地计算动画的移除和持续时间，这将使 TagView非常依赖Timer这似乎不是一个好的解决方案。
我尝试的另一个解决方案是找到类似于 self.presentationMode.wrappedValue.dismiss() 的内容。使用 @Environment(\.presentationMode)变量，不知何故有 TagView在 .onAppear 之后移除自身动画已经完成。但这仅适用于在导航堆栈中创建 View 并且我找不到任何其他方法来让 View 自行销毁的情况。另外我认为这会在 TagModel 再次引起问题更新其数组。
我读了其他几个 S.O.指向 ForEach 循环中数据枚举的解决方案。但是我将每个 TagView 创建为它自己的对象，我认为这不应该是问题，如果这是问题的一部分，我不确定如何实现它。
这是我的应用程序的简化代码，可以在 iOS 单 View 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

目前尚不清楚您尝试实现哪种效果，但是在删除时您应该动画而不是查看内部，而是查看自身，即。在父级中，因为 View 在那里和整体删除。
类似的东西(只是实验的方向):

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)