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)

Hi, how do I edit this code so that it will dynamically update the view when the question changes. For example if I replaced "Question"? with a @State var question. Even when I update the question variable in another function, the view is not automatically updating to show the new question.

My version of Xcode (11.3) objects to line 54

Protocol type 'Any' cannot conform to 'View' because only concrete types can conform to protocols
Value of type 'ZStack<TupleView<(some View, some View)>>' has no member 'tapAction'

and to line 66

Type 'Animation?' has no member 'basic'

I can work around the line 66 error (but why?) but cannot figure out the line 54 one.

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