swiftui - 影响其他视图的 SwiftUI 图像不透明度动画

Question

我正在尝试建立一个带有进度条和状态图标的列表。我想为图标设置动画以指示某些下载活动正在进行中。但是，当我应用动画时，它也会影响进度条并使其动画化。

这是列表视图的代码：

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))
        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)
}

Answer 1

因此 swiftUI 视图修改器从下到上工作，如果进度条从下面的视图中获取动画，则在您不希望受到影响的视图下方添加“.animation(.default)”。

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))
            .animation(.default)
        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)
}