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) {
VStack{
Text("Tap the flag of").foregroundColor(.black).font(.title)
Text(countries[correctAnswer]).font(.largeTitle).fontWeight(.black)
}
ForEach(0 ..< 3) { number in
Button(action: {
self.flagTapped(number)
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
.degrees(animationAmount),
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")) {
self.askQuestion()
})
}
}
}
func flagTapped(_ number: Int) {
if number == correctAnswer {
correctChosen = true
} else {
correctChosen = false
}
showingScore = true
}
func askQuestion() {
countries.shuffle()
correctAnswer = Int.random(in: 0...2)
correctChosen = false
newRound = true
animationAmount = 0.0
}
}
struct FlagImage: View {
var imageName: String
var body: some View {
Image(imageName)
.renderingMode(.original)
.clipShape(RoundedRectangle(cornerRadius: 26))
.overlay(RoundedRectangle(cornerRadius: 26).stroke(Color.gray, lineWidth: 1))
.shadow(color: .black, radius: 4)
}
}