SwiftUI中Image透明度动画意外影响ProgressView等其他视图问题

问题原因 #

这是SwiftUI的默认动画机制导致的：withAnimation 块内的状态变化会给当前视图树中所有同步变化的可动画属性都附加指定动画。你修改的opacity状态会触发整个列表项重绘，此时ProgressView的进度值更新也被附加了这个循环透明度动画，就会出现进度条异常闪动的问题。
另外如果你当前的opacity是整个页面的全局@State变量，还会导致所有列表项的图标同步闪动，无法单独控制每个下载项的动画状态。

解决方法 #

这里提供两种可行方案，你可以根据自己的需求选择：

方案1：快速修复，给ProgressView禁用对应状态的动画

直接给不需要参与动画的ProgressView添加修饰符，明确当opacity变化时不执行任何动画：

List(syncProgres.downloadQueue) { mediaFile in
    VStack(alignment: .leading) {
        Text(mediaFile.path).font(.callout).lineLimit(2).truncationMode(.middle)
        Spacer()
        ProgressView(value: Double(mediaFile.downloadedBytes) / Double(mediaFile.downloadTotalBytes))
            // 新增这行，禁用opacity变化带来的动画影响
            .animation(.none, value: opacity)
        HStack {
            Text("\(MiscUtils.toHumanReadable(bytes: mediaFile.downloadedBytes)) of \(MiscUtils.toHumanReadable(bytes: mediaFile.downloadTotalBytes))").font(.footnote)
            Spacer()
            Image(systemName: "arrow.down.doc").opacity(opacity)
                .onAppear {
                    let baseAnimation = Animation.linear(duration: 1)
                    let repeated = baseAnimation.repeatForever(autoreverses: true)
                    
                    withAnimation(repeated) {
                        opacity = 0.2
                    }
                }
        }
    }.frame(height: 80, alignment: .center)
}

方案2：最优实现，把动画限制在Image内部，避免全局影响

建议把单个下载项抽成独立子视图，每个子视图自己管理透明度状态，同时把动画直接绑定到Image上，完全不会影响同层级的其他视图，还能支持每个下载项单独控制动画：
首先定义独立的下载项视图：

// 替换MediaFile为你实际的model类型
struct DownloadMediaItemView: View {
    let mediaFile: MediaFile
    @State private var itemOpacity = 1.0
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(mediaFile.path)
                .font(.callout)
                .lineLimit(2)
                .truncationMode(.middle)
            Spacer()
            ProgressView(value: Double(mediaFile.downloadedBytes) / Double(mediaFile.downloadTotalBytes))
            HStack {
                Text("\(MiscUtils.toHumanReadable(bytes: mediaFile.downloadedBytes)) of \(MiscUtils.toHumanReadable(bytes: mediaFile.downloadTotalBytes))")
                    .font(.footnote)
                Spacer()
                Image(systemName: "arrow.down.doc")
                    .opacity(itemOpacity)
                    // 动画仅绑定到当前Image的itemOpacity变化，不会影响其他视图
                    .animation(.linear(duration: 1).repeatForever(autoreverses: true), value: itemOpacity)
                    .onAppear {
                        itemOpacity = 0.2
                    }
            }
        }
        .frame(height: 80, alignment: .center)
    }
}

然后原列表的代码简化为：

List(syncProgres.downloadQueue) { mediaFile in
    DownloadMediaItemView(mediaFile: mediaFile)
}

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