SwiftUI动画切换图标时出现卡顿问题求助

问题根源 #

当前代码里有两个独立的动画触发逻辑：芯片移除的withAnimation块，以及单独修改tag.isSelected引发的图标切换。这两个动画事务没有统一协调，SwiftUI在处理芯片滑出的视图层级变化和图标替换时，会出现动画冲突，尤其在移除最后一个芯片时，布局变化叠加图标切换，卡顿表现更明显。

解决方案 #

通过统一动画上下文、优化图标过渡方式、修正状态同步逻辑三个步骤解决：

1. 统一动画上下文

把修改标签选中状态的操作移入芯片移除的withAnimation块中，让两个状态变化共享同一个动画上下文，避免冲突：

Button{
    withAnimation(.easeOut) {
        // 从选中数组移除芯片
        if let index = selectedTags.firstIndex(where: {$0.id == tag.id}){
            selectedTags.remove(at: index)
        }
        // 同步修改标签选中状态
        tag.isSelected = false
    }
} label:{
    Image(systemName: "x.circle.fill")
        .font(.subheadline)
        .padding(.horizontal, 6)
}

2. 优化图标切换动画

放弃if-else条件渲染图标的方式，改用叠加图标+透明度/缩放动画的方案，让图标切换有平滑过渡：

struct TagView: View {
    @ObservedObject var tag: Tag
  
    var body: some View {
        ZStack{
            Rectangle()
                .fill(Color.purple.opacity(0.6))
                .cornerRadius(5)
                .opacity(tag.isSelected ? 1 : 0)
                .animation(.easeInOut(duration: 0.2), value: tag.isSelected)
            
            HStack(spacing: 8){
                ZStack {
                    // 未选中图标
                    Image(systemName: "circle")
                        .font(.title2.weight(.light))
                        .opacity(tag.isSelected ? 0 : 1)
                        .scaleEffect(tag.isSelected ? 0.8 : 1)
                    
                    // 选中图标
                    Image(systemName: "checkmark.circle.fill")
                        .font(.title2.weight(.light))
                        .opacity(tag.isSelected ? 1 : 0)
                        .scaleEffect(tag.isSelected ? 1 : 0.8)
                }
                .animation(.easeInOut(duration: 0.2), value: tag.isSelected)
                
                Image(systemName: "number")
                    .font(.body.weight(.bold))
                
                Text(tag.name)
                    .font(.headline)
                    .fontWeight(.bold)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
        }
    }
}

3. 修正标签选中的状态同步逻辑

确保点击标签时，selectedTags数组与tag.isSelected状态完全同步，避免数据不一致导致的额外视图更新：

ForEach(testTags){ tag in
    TagView(tag: tag)
        .onTapGesture {
            withAnimation(.easeIn) {
                tag.isSelected.toggle()
                if tag.isSelected {
                    // 避免重复添加标签
                    if !selectedTags.contains(where: {$0.id == tag.id}) {
                        selectedTags.append(tag)
                    }
                } else {
                    // 同步从选中数组移除标签
                    if let index = selectedTags.firstIndex(where: {$0.id == tag.id}) {
                        selectedTags.remove(at: index)
                    }
                }
            }
        }
}

原理说明 #

• 统一动画上下文：让芯片滑出和标签状态修改共享同一个动画事务，SwiftUI会合并视图更新，减少动画冲突。
• 图标过渡优化：通过透明度和缩放的渐变动画替代直接的视图替换，让动画系统能平滑处理图标切换，避免卡顿。
• 状态同步：确保数据层的一致性，减少不必要的视图重绘，提升整体动画流畅度。

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