A SwiftUI animation that represents a flip view to show Q&A cards.

SwiftUI-flip-animation.swift

//: A UIKit based Playground for presenting SwiftUI based user interface
// by @fitomad
  
import UIKit
import SwiftUI
import PlaygroundSupport

// MARK: - Contenedor Principal -

public struct Container: View
{
    public var body: some View
    {
        VStack
        {
            Text("SwiftUI Animations.")
                .font(.title)
                .fontWeight(.bold)
            
            Text("Animación inspirada en la presentada durante la sesión 219, SwiftUI on watchOS, de la pasada WWDC 2019")
                .lineLimit(nil)
                .lineSpacing(1.5)
                .padding(16)
          
            FlipView()
        }
    }
}

// MARK: - Es la `View` que implementa la tarjeta -

public struct FlipView: View
{
    /// Tenemos que *dar la vuelta* a la tarjeta para
    /// ver el resultado a la pregunta.
    @State private var showResults: Bool = false
    
    public var body: some View
    {
        ZStack
        {
            Side(text: "Question?")
                .background(Color.yellow)
                .rotation3DEffect(.degrees(self.showResults ? 180.0 : 0.0), axis: (x: 0.0, y: 1.0, z: 0.0))
                .zIndex(self.showResults ? 0 : 1)
                .frame(width: 300, alignment: .center)
            
            Side(text: "Answer!")
                .background(Color.yellow)
                .rotation3DEffect(.degrees(self.showResults ? 0.0 : 180.0), axis: (x: 0.0, y: -1.0, z: 0.0))
                .zIndex(self.showResults ? 1 : 0)
                .frame(width: 300, alignment: .center)
        }
        .tapAction(self.handleFlipViewTap)
    }
    
    // MARK: - Actions -
    
    /**
        Al pulsar sobre la `View` cambiamos la tarjeta
        para mostrar la tarjeta con la pregunta o la
        tarjeta con la respuesta
    */
    private func handleFlipViewTap() -> Void
    {
        withAnimation(.basic(duration: 0.25, curve: .easeOut))
        {
            self.showResults.toggle()
        }
    }
}

// MARK: - Una de las caras de la tarjeta -

public struct Side: View
{
    /// El contenido de la tarjeta. Puede ser
    /// una pregunta o una respuesta.
    @State public var text: String = ""
    
    public var body: some View
    {
        Text(self.text)
            .font(.title)
            .fontWeight(.black)
            .padding(32)
    }
}

// Present the view controller in the Live View window
let container = Container()
PlaygroundPage.current.liveView = UIHostingController(rootView: container)

Fixes:
line 66 → withAnimation(.easeOut(duration:0.25))
line 54 → .onTapGesture { self.handleFlipViewTap() }