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

Question

我有一个循环，我在其中更新了一个改变视图的值。在此示例中，我希望更新一次发生一个，因此您会看到它在行中波动，但它们都是同时发生的。

struct AnimationQuestion: View {
   @State var colors = "⬛️⬜️".map { String([=10=]) }
   @State var reversedColors = "⬜️⬛️".map { String([=10=]) }

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

我希望这些行能够按顺序（明显）执行动画：

    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

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

How do I animate changes one at a time in SwiftUI on a button tap?

swift

swiftui