SwiftUI-按按钮时为视图设置动画

我刚刚完成了第六课“用Wift进行黑客攻击”。我为一个不应该那么难的挑战而疯狂

这里我有一个名为GuessOffFlag的工作游戏，其中用户必须选择正确的标志，然后在进入下一轮之前收到警报

我的问题很简单：我想让错误的旗帜视图变得不透明，并在选择答案时让正确的旗帜视图旋转360度。在用户单击“继续”之前，这一切都应该发生在警报后面

可选：我还想完全删除警报，并在旋转动画完成后让游戏进入下一轮。我可以将圆形更改绑定到动画的末尾吗？还是必须使用某种sleep（）命令

导入快捷界面
结构FlagView:视图{
var标志：字符串
var body：一些观点{
图像（旗帜）
.renderingMode（.original）
.clipShape（胶囊（））
.叠加（胶囊（）.笔划（颜色.黑色，线宽：2））
.阴影（颜色：。黑色，半径：2）
}
}
结构ContentView:View{
@国家/私营var国家=[“爱沙尼亚”、“法国”、“德国”、“爱尔兰”、“意大利”、“尼日利亚”、“波兰”、“俄罗斯”、“西班牙”、“英国”、“美国”]。shuffled（）
@国家私有变量correctAnswer=Int.random（in:0…2）
@状态私有变量showingScore=false
@国家私有var scoreTitle=“”
@国有私营企业风险值得分=0
@状态私有变量animate=false
var警报：警报{
如果scoreTitle==“错误”{
返回警报（标题：Text（scoreTitle），消息：Text（“正确答案为\（国家[正确答案]）”），dismissButton:。默认值（文本（“重新启动”））{
self.askQuestion（）
动画=假
})
}
否则{
返回警报（标题：Text（scoreTitle），消息：Text（“您的分数是\（分数）”），dismissButton:。默认值（文本（“继续”））{
self.askQuestion（）
动画=假
})
}
}
var body：一些观点{
ZStack{
LinearGradient（渐变：渐变（颜色：[.黑色、.蓝色、.橙色]），起点：.顶部，终点：.底部）。边缘识别安全区域（.all）
VStack（间距：40）{
VStack{
文本（“点击的标志”）
.foregroundColor（.白色）
文本（国家[答复]）
.font（.largeTitle）
.fontWeight（.黑色）
.foregroundColor（.白色）
}
ForEach（0..<3）{
按钮（操作：{
动画片{
自动标记（编号）
animate.toggle（）
}
}) {
FlagView（旗帜：self.countries[编号]）
}
}
文本（“您的分数是\（分数）”）
.font（.headline）
.fontWeight（.黑色）
.foregroundColor（颜色.白色）
垫片（）
}
}
.警报（显示：$showingScore）{
警觉的
}
}
func flagstapped（uu编号：Int）{
如果数字==正确答案{
scoreTitle=“正确”
分数+=1
}否则{
scoreTitle=“错误”
分数=0
}
showingScore=true
}
func askQuestion（）{
国家。洗牌（）
correctAnswer=Int.random（in:0…2）
}
}
结构内容视图\u预览：PreviewProvider{
静态var预览：一些视图{
ContentView（）
}
}

任何帮助都将不胜感激！

---

提前感谢

只需在

FlagView

上应用视图修改器

不透明度

和

旋转效果

，而不是使用离散值（例如

.opacity（0.1）

），使其有条件：

.opacity（（self.animate&&number！=correctAnswer）？0.1:1.0）

动画部分将自动完成SwiftUI。请参见下面我的工作示例：

导入快捷界面
结构FlagView:视图{
var标志：字符串
var body：一些观点{
文本（标志）
}
}
结构ContentView:View{
@国家/私营var国家=[“爱沙尼亚”、“法国”、“德国”、“爱尔兰”、“意大利”、“尼日利亚”、“波兰”、“俄罗斯”、“西班牙”、“英国”、“美国”]。shuffled（）
@国家私有变量correctAnswer=Int.random（in:0…2）
@状态私有变量showingScore=false
@国家私有var scoreTitle=“”
@国有私营企业风险值得分=0
@状态私有变量animate=false
var警报：警报{
如果scoreTitle==“错误”{
返回警报（标题：Text（scoreTitle），消息：Text（“正确答案为\（国家[正确答案]）”），dismissButton:。默认值（文本（“重新启动”））{
self.askQuestion（）
})
}
否则{
返回警报（标题：Text（scoreTitle），消息：Text（“您的分数是\（分数）”），dismissButton:。默认值（文本（“继续”））{
self.askQuestion（）
})
}
}
var body：一些观点{
ZStack{
LinearGradient（渐变：渐变（颜色：[.黑色、.蓝色、.橙色]），起点：.顶部，终点：.底部）。边缘识别安全区域（.all）
VStack（间距：40）{
VStack{
文本（“点击的标志”）
.foregroundColor（.白色）
文本（国家[答复]）
.font（.largeTitle）
.fontWeight（.黑色）
.foregroundColor（.白色）
}
import SwiftUI

struct FlagView: View {
    var flag: String
    
    var body: some View {
        Image(flag)
            .renderingMode(.original)
            .clipShape(Capsule())
            .overlay(Capsule().stroke(Color.black, lineWidth: 2))
            .shadow(color: .black, radius: 2)
    }
    
}

struct ContentView: View {
    @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 showingScore = false
    @State private var scoreTitle = ""
    @State private var score = 0
    @State private var animate = false
    
    var alert: Alert {
        if scoreTitle == "Wrong" {
            return Alert(title: Text(scoreTitle), message: Text("The correct answer was \(countries[correctAnswer])"), dismissButton: .default(Text("Restart")) {
                self.askQuestion()
                animate = false
            })
        }
        else {
            return Alert(title: Text(scoreTitle), message: Text("Your Score is \(score)"), dismissButton: .default(Text("Continue")) {
                self.askQuestion()
                animate = false
            })
        }
        
    }

    var body: some View {
        ZStack{
            LinearGradient(gradient: Gradient(colors: [.black,.blue, .orange]), startPoint: .top, endPoint: .bottom).edgesIgnoringSafeArea(.all)
            
            VStack(spacing: 40) {
                VStack{
                    Text("Tap the flag of")
                        .foregroundColor(.white)
                    Text(countries[correctAnswer])
                        .font(.largeTitle)
                        .fontWeight(.black)
                        .foregroundColor(.white)
                }
                
                ForEach(0 ..< 3){ number in
                    Button(action: {
                        withAnimation {
                            self.flagTapped(number)
                            animate.toggle()
                        }
                    }) {
                        FlagView(flag: self.countries[number])
                    }
                }
                
                Text("Your Score is \(score)")
                    .font(.headline)
                    .fontWeight(.black)
                    .foregroundColor(Color.white)
                
                Spacer()
            }
        }
        .alert(isPresented: $showingScore) {
            alert
        }
    }

    func flagTapped(_ number: Int) {
        if number == correctAnswer {
            scoreTitle = "Correct"
            score += 1
            
        } else {
            scoreTitle = "Wrong"
            score = 0
            
        }
        
        showingScore = true
        
    }
    
    func askQuestion() {
        countries.shuffle()
        correctAnswer = Int.random(in: 0...2)
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}