BLACK FRIDAY SALE: Save 50% on all my Swift books and bundles! >>

Hacking wSwiftUI- Animation challenge with GuessTheFlag - rotation3DEffect seems to cause opacity change?

Forums > Books

I'm working on the challenge to make the flag spin when the chosen one is correct, and I can get the flag to spin. However, the opacity is also changing (to maybe 0.2) at the same time when there is no modifier for opacity used. If I comment out the rotation3DEffect modifier, the opacity remains at 1.0. One thing that is odd, when using Preview the opacity is correct but with simulator (and on device) it is incorrect. If I use .opacity(1.0) before or after (or both) the rotation3DEffect modifier, it doesn't help.

Any help or suggestions would be appreciated. Thanks. -Steve

XCode 12.1

Deployment Target 14.0

struct ContentView: View {
   @State private var showingScore = false

   @State private var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Monaco", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"].shuffled()
   @State private var correctAnswer = Int.random(in: 0...2)
   @State private var correctChosen = false

   @State private var newRound = true
   @State private var animationAmount = 0.0

   var body: some View {
      ZStack {
         VStack(spacing: 20) {
               Text("Tap the flag of").foregroundColor(.black).font(.title)

            ForEach(0 ..< 3) { number in
               Button(action: {
                  withAnimation(.easeOut(duration: 0.8)) {
                     self.animationAmount += 360.0
                     self.newRound = false
               }) {
                  if (correctChosen && number == correctAnswer) {
                     FlagImage(imageName: self.countries[number])
                        .rotation3DEffect(   // if this modifier is commented, opacity doesn't change
                           axis: (x: 0.0, y: 1.0, z: 0.0)
                  } else {
                     FlagImage(imageName: self.countries[number])
//                        .opacity(newRound || (correctChosen && number == correctAnswer) ? 1.0 : 0.3)  // this opacity works as desired when uncommented
//                        .animation(nil)
            .padding(.bottom, 24)

         .alert(isPresented: $showingScore) {
            Alert(title: Text("Next"), message: nil, dismissButton: .default(Text("OK")) {

   func flagTapped(_ number: Int) {
      if number == correctAnswer {
         correctChosen = true
      } else {
         correctChosen = false
      showingScore = true

   func askQuestion() {
      correctAnswer = Int.random(in: 0...2)
      correctChosen = false
      newRound = true
      animationAmount = 0.0

struct FlagImage: View {
   var imageName: String
   var body: some View {
         .clipShape(RoundedRectangle(cornerRadius: 26))
         .overlay(RoundedRectangle(cornerRadius: 26).stroke(Color.gray, lineWidth: 1))
         .shadow(color: .black, radius: 4)


Using the latest Xcode beta 12.2 and iOS14.2 simulator, I don't see the issue anymore.


Save 50% in my Black Friday sale.

SAVE 50% To celebrate Black Friday, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

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.