影响其他视图的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)
}