Is there a way to add a flip animation when I tap on my text? - swift

Question

Im trying to make a flash cards program and I can't seem to figure out how to make a flip animation to reveal the corresponding answer. Here is my code:
Text( "\(text)" + " \(X)" + " \(text1)")
.frame(width: 120, height: 300, alignment: .center)
.onTapGesture {
if selection == "Multiply" { text = num1 * num2 clear() }
if selection == "Addition" { text = num1 + num2 clear() }
if selection == "Subtraction" { text = num1 - num2 clear() }
if selection == "Division" { divAnswer = Double(num1 / num2) text = num1 / num2 clear() }
}
(im very new to swifui)

Answer 1

Based on the tutorial from the link in the comment, I set up the following. It created just one card with one exercise, but it shows how it could work. You would have to adjust it to your needs:
//
// CardFlip.swift
// CardFlip
//
// Created by Sebastian Fox on 26.08.22.
//
import SwiftUI
struct ContentView: View {
// For testing, you can setup your exercise here
#State var task: Task = Task(operator1: 5, operator2: 10, operation: .addition)
//MARK: Variables
#State var backDegree = 0.0
#State var frontDegree = -90.0
#State var isFlipped = false
let width : CGFloat = 200
let height : CGFloat = 250
let durationAndDelay : CGFloat = 0.3
//MARK: Flip Card Function
func flipCard () {
isFlipped = !isFlipped
if isFlipped {
withAnimation(.linear(duration: durationAndDelay)) {
backDegree = 90
}
withAnimation(.linear(duration: durationAndDelay).delay(durationAndDelay)){
frontDegree = 0
}
} else {
withAnimation(.linear(duration: durationAndDelay)) {
frontDegree = -90
}
withAnimation(.linear(duration: durationAndDelay).delay(durationAndDelay)){
backDegree = 0
}
}
}
//MARK: View Body
var body: some View {
ZStack {
CardBack(width: width, height: height, degree: $backDegree, task: $task)
CardFront(width: width, height: height, degree: $frontDegree, task: $task)
}.onTapGesture {
flipCard ()
}
}
}
struct CardFront : View {
let width : CGFloat
let height : CGFloat
#Binding var degree : Double
#Binding var task: Task
func calcResult() -> Double {
var result: Double!
switch task.operation {
case .addition: result = task.operator1 + task.operator2
case .substraction: result = task.operator1 - task.operator2
case .mulitply: result = task.operator1 * task.operator2
case .division: result = task.operator1 / task.operator2
}
return result
}
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 20)
.fill(.white)
.frame(width: width, height: height)
.shadow(color: .gray, radius: 2, x: 0, y: 0)
.overlay(
Text("\(calcResult(), specifier: "%.2f")"))
}.rotation3DEffect(Angle(degrees: degree), axis: (x: 0, y: 1, z: 0))
}
}
struct CardBack : View {
let width : CGFloat
let height : CGFloat
#Binding var degree : Double
#Binding var task: Task
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 20)
.fill(.white)
.frame(width: width, height: height)
.shadow(color: .gray, radius: 2, x: 0, y: 0)
.overlay(
Text("\(String(task.operator1)) \(task.operation.rawValue) \(String(task.operator2))")
)
}.rotation3DEffect(Angle(degrees: degree), axis: (x: 0, y: 1, z: 0))
}
}
struct Task {
var operator1: Double
var operator2: Double
var operation: Operations
}
enum Operations: String, CaseIterable {
case addition = "+"
case division = "/"
case mulitply = "x"
case substraction = "-"
}
Here a gif of how it looks like in the simulator: