Hey, I got a weird graphical glitch I can't seem to get rid of. When I click my flag to make it rotate it goes one full round (360 degrees) but seems to glitch out at around 90 degrees. Those few frames are simply not rendered, making it all seem a bit jerky. Any way to solve this? Added the code below.
import SwiftUI
struct ContentView: View {
@State private var showingScore = false
@State private var scoreTitle = ""
@State private var alertText = ""
@State private var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"].shuffled()
@State private var correctAnswer = Int.random(in: 0...2)
@State private var userScore = Int(0)
@State private var hasGuessed = false
@State private var selected = 0
@State private var rotation = 0
var body: some View {
ZStack {
LinearGradient(gradient: Gradient(colors: [.pink, .purple, .blue]), startPoint: .top, endPoint: .bottom)
.edgesIgnoringSafeArea(.all)
VStack(spacing: 25) {
VStack {
Text("Tap the flag of")
.foregroundColor(.white)
Text(countries[correctAnswer])
.foregroundColor(.white)
.font(.largeTitle)
.fontWeight(.black)
}
ForEach(0..<3) { number in
Button(action: {
flagTapped(number)
selected = number
hasGuessed.toggle()
print(correctAnswer)
}) {
Image(countries[number])
.renderingMode(.original)
.clipShape(RoundedRectangle(cornerRadius: 5))
.shadow(color: .orange, radius: 100)
}
.opacity(number != correctAnswer && hasGuessed ? 0.25 : 1)
.scaleEffect(number == correctAnswer && hasGuessed ? 1.3 : 1)
.animation(.easeInOut(duration: 0.2))
.rotation3DEffect(.degrees(number == correctAnswer && hasGuessed ? 360 : 0), axis: (x: 0, y: 1, z: 0))
.animation(number == selected && number == correctAnswer && hasGuessed ? .easeInOut(duration: 1) : nil)
.modifier(ShakeEffect(shakes:(number == selected && correctAnswer != selected && hasGuessed ? 2 : 0)))
.animation(number == selected && correctAnswer != selected && hasGuessed ? .easeInOut(duration: 0.5) : nil)
.alert(isPresented: $showingScore) {
Alert(title: Text(scoreTitle), message: Text(alertText), dismissButton: .default(Text("Continue")) {
askQuestion()
})
}
}
VStack {
Text("Your score is \(userScore)")
.foregroundColor(.white)
.font(.subheadline)
.fontWeight(.light)
}
}
}
}
func flagTapped(_ number: Int) {
if number == correctAnswer {
scoreTitle = "Correct"
alertText = "Yup! That's the flag of \(countries[correctAnswer])"
userScore += 1
withAnimation(.interpolatingSpring(mass: 0.5, stiffness: 30, damping: 30, initialVelocity: 5)){}
} else {
scoreTitle = "Wrong"
alertText = "Dead wrong, mister! That's \(countries[number])"
}
DispatchQueue.main.asyncAfter(deadline: .now() + 1.2) {
showingScore = true
}
}
func askQuestion() {
hasGuessed.toggle()
countries.shuffle()
correctAnswer = Int.random(in: 0...2)
}
}
struct ShakeEffect: GeometryEffect {
func effectValue(size: CGSize) -> ProjectionTransform {
return ProjectionTransform(CGAffineTransform(translationX: -30 * sin(position * 2 * .pi), y: 0))
}
init(shakes: Int) {
position = CGFloat(shakes)
}
var position: CGFloat
var animatableData: CGFloat {
get { position }
set { position = newValue }
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}