SwiftUI视图添加与移除时转场动画冲突问题求助

问题场景 #

我实现了一个基于VStack的消息提示视图TickerView，给每个列表项定义了自定义转场：

extension AnyTransition {
    static var moveAndFade: AnyTransition {
        .asymmetric(
            insertion: .move(edge: .bottom).combined(with: .opacity),
            removal: .opacity
        )
    }
}

预期效果是：新增项从底部移入并淡入，移除项仅淡出。单独操作增删都正常，但同时添加新项和移除现有项时，被移除的视图不会跟随其他视图上移，而是停在原地淡出，出现动画冲突。

视图代码：

public struct TickerView: View {
    var items: [TickerItem]

    public var body: some View {
        VStack(alignment: .trailing) {
            ForEach(items.sorted(by: \.timeStamp, <)) { item in
                Text(item.text)
                    .transition(.moveAndFade)
            }
            .frame(maxWidth: .infinity, alignment: .trailing)
        }
        .frame(maxWidth: .infinity, minHeight: 0, maxHeight: 200, alignment: .bottom)
        .clipped()
    }
}

复现用的测试代码：

public struct TestTickerView: View {
    @State var items: [TickerItem] = []

    public init() {}

    public var body: some View {
        VStack {
            Button {
                let id = UUID()
                withAnimation {
                    items.append(.init(id: id, text: "Random Text \(Int.random(in: 1...100))", timeStamp: .now))
                }
                Task {
                    try await Task.sleep(for: .seconds(3))
                    await MainActor.run {
                        withAnimation(.easeIn(duration: 1)) {
                            items.removeAll { $0.id == id }
                        }
                    }
                }
            } label: {
                Text("Add item")
            }
            Spacer()
            TickerView(items: items)
        }
        .padding()
    }
}

问题根源 #

1. ForEach内排序导致视图标识混乱：直接在ForEach中调用sorted，每次数组变化都会生成新的排序数组，SwiftUI无法稳定跟踪每个视图的位置变化，动画计算逻辑被干扰。
2. 移除转场未绑定布局动画：原移除转场仅包含透明度变化，未同步布局位置的移动动画，同时增删时，布局变化的动画和移除的淡出动画脱节。
3. 动画参数不统一：新增用默认动画，移除用自定义时长的easeIn，不同动画曲线和时长加剧了冲突。

解决方案 #

1. 提前排序，稳定视图标识 #

将排序逻辑从ForEach中剥离，提前计算好排序后的数组，确保ForEach遍历的是稳定的有序数组：

public struct TickerView: View {
    var items: [TickerItem]

    private var sortedItems: [TickerItem] {
        items.sorted(by: \.timeStamp, <)
    }

    public var body: some View {
        VStack(alignment: .trailing) {
            ForEach(sortedItems) { item in
                Text(item.text)
                    .transition(.moveAndFade)
            }
            .frame(maxWidth: .infinity, alignment: .trailing)
        }
        .frame(maxWidth: .infinity, minHeight: 0, maxHeight: 200, alignment: .bottom)
        .clipped()
    }
}

2. 调整移除转场，同步位置变化 #

修改自定义转场，让移除时的动画包含位置移动，确保被移除视图跟随布局变化同步移动并淡出：

extension AnyTransition {
    static var moveAndFade: AnyTransition {
        .asymmetric(
            insertion: .move(edge: .bottom).combined(with: .opacity),
            removal: .opacity.combined(with: .move(edge: .bottom))
        )
    }
}

3. 给容器添加统一动画修饰符 #

在VStack容器上添加animation修饰符，让布局变化的动画和转场动画统一执行：

public var body: some View {
    VStack(alignment: .trailing) {
        ForEach(sortedItems) { item in
            Text(item.text)
                .transition(.moveAndFade)
        }
        .frame(maxWidth: .infinity, alignment: .trailing)
    }
    .animation(.easeInOut(duration: 0.5), value: sortedItems) // 统一动画参数
    .frame(maxWidth: .infinity, minHeight: 0, maxHeight: 200, alignment: .bottom)
    .clipped()
}

4. 统一增删操作的动画参数 #

在测试代码中，让新增和移除使用相同的动画曲线和时长，避免参数不一致导致的动画不同步：

Button {
    let id = UUID()
    let sharedAnimation = Animation.easeInOut(duration: 0.5)
    withAnimation(sharedAnimation) {
        items.append(.init(id: id, text: "Random Text \(Int.random(in: 1...100))", timeStamp: .now))
    }
    Task {
        try await Task.sleep(for: .seconds(3))
        await MainActor.run {
            withAnimation(sharedAnimation) {
                items.removeAll { $0.id == id }
            }
        }
    }
} label: {
    Text("Add item")
}

效果验证 #

调整后，同时增删视图时，被移除的视图会先跟随其他视图上移，同步执行淡出动画，动画冲突问题解决。

内容的提问来源于stack exchange，提问作者Fogmeister