swiftUI 2秒后自动延迟动画

Question

嗨，我正在学习swiftUI，我的项目遇到了一些问题。

我有一张主卡，可以旋转5张随机卡，再加上卡的背面。并在底部的5个按钮上代表5张随机卡片。

当我按下5个按钮中的任何一个以旋转存储卡时，我希望存储卡在2秒钟后自动在存储卡上旋转回去。

这是我的代码：

import SwiftUI


struct CardBack: View {
    var body: some View {

      Image("back_card")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 250)
    }
}

struct ContentView: View {

   @State var flipped = false
   @State private var cardsFront = ["bigCard1", "bigCard2", "bigCard3", "bigCard4", "bigCard5" ]
   @State private var cardBack = "back_card"

    var body: some View {
        VStack {
            Spacer()
            ZStack {

            Image(flipped ? self.cardsFront.randomElement()! : self.cardBack)
              .resizable()
              .aspectRatio(contentMode: .fit)
              .frame(width: 250)
              .rotation3DEffect(Angle(degrees: flipped ? 180 : 0 ), axis: (x: 0, y: 1, z: 0))
            }

            Spacer()
            HStack {
                Button(action: {
                    withAnimation(.spring()) {
                        self.flipped.toggle()
                    }

                }) {
                    Image("circle")
                        .renderingMode(.original)
                }


                Button(action: {

                }) {
                    Image("plus")
                        .renderingMode(.original)
                }

                Button(action: {

                }) {
                    Image("wave")
                        .renderingMode(.original)
                }

                Button(action: {

                }) {
                    Image("square")
                        .renderingMode(.original)
                }

                Button(action: {

                }) {
                    Image("star")
                        .renderingMode(.original)
                }

            }
            Spacer()
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

这里是一个按钮的演示

Button(action: {
    withAnimation(.spring()) {
        self.flipped.toggle()
    }
    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
        withAnimation(.spring()) {
            self.flipped.toggle()
        }
    }
}) {
    Image("circle")
        .renderingMode(.original)
}