maddiefuzz/TokiTrainer
maddiefuzz/TokiTrainer
1
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Flash card flip animation

Browse Source
This commit is contained in:
Avery Pace 2021-11-05 20:23:33 -04:00
parent 7501388406
commit 6a81806abf
2 changed files with 35 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Toki Trainer.xcodeproj/xcuserdata/averyadapace.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist
View File

@ -3,22 +3,4 @@
uuid = "2238B32A-BF80-4351-B121-F5E36A8C39FC" uuid = "2238B32A-BF80-4351-B121-F5E36A8C39FC"
type = "1" type = "1"
version = "2.0"> version = "2.0">
<Breakpoints>
<BreakpointProxy
BreakpointExtensionID = "Xcode.Breakpoint.FileBreakpoint">
<BreakpointContent
uuid = "0CF1FB12-C902-4612-972E-1D35E74BC1AC"
shouldBeEnabled = "No"
ignoreCount = "0"
continueAfterRunningActions = "No"
filePath = "Toki Trainer/Views/FlashCardView.swift"
startingColumnNumber = "9223372036854775807"
endingColumnNumber = "9223372036854775807"
startingLineNumber = "24"
endingLineNumber = "24"
landmarkName = "body"
landmarkType = "24">
</BreakpointContent>
</BreakpointProxy>
</Breakpoints>
</Bucket> </Bucket>

58
Toki Trainer/Views/FlashCardView.swift
View File

@ -10,38 +10,39 @@ import SwiftUI
struct FlashCardView: View { struct FlashCardView: View {
let screen = UIScreen.main.bounds let screen = UIScreen.main.bounds
@State var flipped = false @State var isFaceDown = false
@State var rotationAngle: Double = 0
var body: some View { var body: some View {
let flipDegrees = flipped ? 0.0 : 180.0 let flipDegrees = isFaceDown ? 0.0 : 180.0
ZStack() { Text("sina")
Text("sina").opacity(flipped ? 0.0 : 1.0) .modifier(CardFlipModifier(isFaceDown: isFaceDown, frontText: "linja", backText: "long, very thin, floppy thing, e.g. string, rope, hair, thread, cord, chain"))
Text("you") .frame(width: 0.8 * screen.width, height: 200.0)
.opacity(flipped ? 1.0 : 0.0) .font(.title)
.rotation3DEffect(Angle(degrees: -180 + flipDegrees), axis: (x: 0.0, y: 10.0, z: 0.0)) .shadow(color: .gray, radius: 10.0, x: 10, y: 10)
} .rotation3DEffect(self.isFaceDown ? Angle(degrees: 180) : Angle(degrees: 0), axis: (x: 0.0, y: 10.0, z: 0.0))
.frame(width: 0.8 * screen.width, height: 200.0) .animation(.default)
.font(.title) .onTapGesture {
.background(self.flipped ? .cyan : .mint) self.isFaceDown.toggle()
.cornerRadius(20) }
.shadow(color: .gray, radius: 10.0, x: 10, y: 10)
.rotation3DEffect(self.flipped ? Angle(degrees: 180) : Angle(degrees: 0), axis: (x: 0.0, y: 10.0, z: 0.0)
)
.animation(.default)
.onTapGesture {
self.flipped.toggle()
}
} }
} }
struct CardFlipModifier: AnimatableModifier { struct CardFlipModifier: AnimatableModifier {
var frontText: String
var backText: String
var isFaceDown: Bool
var rotationAngle: Double var rotationAngle: Double
init(isFaceUp: Bool) { init(isFaceDown: Bool, frontText: String, backText: String) {
rotationAngle = isFaceUp ? 0 : 180 rotationAngle = isFaceDown ? 180 : 0
self.isFaceDown = isFaceDown
self.frontText = frontText
self.backText = backText
} }
var animatableData: Double { var animatableData: Double {
@ -50,11 +51,20 @@ struct CardFlipModifier: AnimatableModifier {
} }
func body(content: Content) -> some View { func body(content: Content) -> some View {
ZStack { return ZStack {
RoundedRectangle(cornerRadius: 20.0) RoundedRectangle(cornerRadius: 20.0)
.fill(Color.blue.opacity(rotationAngle < 90 ? 0.5 : 1.0)) .fill(rotationAngle < 90 ? Color.blue : Color.cyan)
content .animation(.none)
Text(frontText)
.font(.title)
.opacity(rotationAngle < 90 ? 1.0 : 0.0) .opacity(rotationAngle < 90 ? 1.0 : 0.0)
.animation(.none)
Text(backText)
.font(.subheadline)
.padding()
.opacity(rotationAngle < 90 ? 0.0 : 1.0)
.scaleEffect(CGSize(width: -1.0, height: 1.0))
.animation(.none)
} }
} }
} }