如何让SwiftUI List单元格添加动画更流畅？实现默认动效

我正在创建一个SwiftUI视图，希望在视图出现后逐个填充列表单元格，效果如下：

以下是当前实现代码：

import SwiftUI

struct AnimatedListView: View {
    @State private var items: [String] = []
    
    var body: some View {
        List {
            ForEach($items, id: \.self) { $item in
                Text(item)
            }
            .animation(.easeInOut, value:items) // Apply animation to each cell
            
            if items.isEmpty {
                Text("No items")
                    .foregroundColor(.gray)
            }
        }
        .onAppear {
            withAnimation{
                animateList()
            }
        }
    }
    
    private func animateList() {
        let initialItems = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
        
        for (index, item) in initialItems.enumerated() {
            DispatchQueue.main.asyncAfter(deadline: .now() + Double(index) * 0.2) {
                items.append(item)
            }
        }
    }
}

// Usage example
struct ContentView: View {
    var body: some View {
        AnimatedListView()
    }
}

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

我希望实现列表添加单元格的.default默认动画，请问该如何优化让动画更流畅？

优化方案 #

要实现更流畅的默认列表插入动画，可按以下方式调整代码：

• 移除ForEach上的全局动画：全局动画会干扰系统默认的列表动画逻辑，导致效果不流畅。
• 用withAnimation包裹单个添加操作：每次向数组中添加元素时，用withAnimation(.default)包裹，确保触发系统为列表优化的默认插入动画。
• 简化ForEach绑定：如果不需要编辑列表项内容，直接使用items而非$items，减少不必要的绑定开销。

优化后的完整代码：

import SwiftUI

struct AnimatedListView: View {
    @State private var items: [String] = []
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            
            if items.isEmpty {
                Text("暂无内容")
                    .foregroundColor(.gray)
            }
        }
        .onAppear {
            animateList()
        }
    }
    
    private func animateList() {
        let initialItems = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
        
        for (index, item) in initialItems.enumerated() {
            DispatchQueue.main.asyncAfter(deadline: .now() + Double(index) * 0.2) {
                withAnimation(.default) {
                    items.append(item)
                }
            }
        }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        AnimatedListView()
    }
}

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

补充说明 #

系统默认的.default动画针对列表插入做了专门优化，包含淡入+滑入的组合效果，比自定义动画更贴合原生交互体验。如果需要个性化调整，可将.default替换为其他动画类型（如.spring()），但保持withAnimation包裹单个添加操作的方式即可。

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