如何通过点击按钮一次在 SwiftUI 中对更改进行动画处理？

Question

我有一个循环，我在其中更新一个更改视图的值。 在这个例子中，我希望更新一次发生一个，所以你会看到它在行中波动，但它们都是同时发生的。

struct AnimationQuestion: View {
   @State var colors = "🟪🟨🟧🟦🟥🟫⬛️🟩⬜️".map { String($0) }
   @State var reversedColors = "⬜️🟩⬛️🟫🟥🟦🟧🟨🟪".map { String($0) }

   var body: some View {
      VStack {
         Spacer()
         Button("Tap") {
            let temp = colors
            for i in 0 ..< colors.count {
               withAnimation(.linear(duration: 4.0)) {
                  colors[i] = reversedColors[i]
               }
            }
            reversedColors = temp
            
         }
         Spacer()

         HStack {
            ForEach(Array(colors.enumerated()), id: \.0) { index, color in
               Text(color).tag(index)
            }
         }
         Spacer()
      }
   }
}

struct QuestionPreview: PreviewProvider {
   static var previews: some View {
      AnimationQuestion()
   }
}

我希望这些行按顺序（明显）执行 animation：

    withAnimation(.linear(duration: 4.0)) {
         colors[i] = reversedColors[i]
    }

Answer 1

您通过索引\.0标识，但索引在反转后不会改变，因此刷新是即时的，而您需要通过颜色值\.1标识（在这种情况下它们是唯一的）。

这是一个修复

ForEach(Array(colors.enumerated()), id: \.1) { index, color in
   Text(color).tag(index)
}

用 Xcode 13.3 / iOS 15.4 测试