UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Day 34 | Flag clipping

Forums > 100 Days of SwiftUI

@Noste  

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()
    }
}

2      

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer! Hurry up because it'll be available only until April 28th.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.