swiftui - SwiftUi 过渡/动画

Question

我是 SwiftUI 的新手，并且设法构建了简单的游戏。除了我计划实施某种图像动画/过渡以将图像引入视图之外的所有作品。图像格式正确，但太突然，希望能柔化图像发光我尝试过使用动画方法，但没有产生任何差异。我希望有人能指出我正确的方向。

    var body: some View {


        NavigationView {

            ZStack {

                Image("background")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .scaledToFill()
                    .edgesIgnoringSafeArea(.all)


                VStack {

                        Text("Tap Correct Image")

                            .font(.headline)
                            .foregroundColor(Color.blue)

                    ForEach((0...2), id: \.self) { number in

                        Image(self.naijaObject[number])
                            .resizable()
                            .frame(width: 100, height: 100)
                            .border(Color.black,width: 1)
                            .transition(.slide)
                            .animation(.easeInOut(duration: 1))
                            .onTapGesture {
                                self.pictureTapped(number)
                        }


                    }


                    .navigationBarTitle(Text(processCorrectAnswer))
                    .alert(isPresented: $showAlert) {
                        Alert(title: Text("\(alertTitle), Your score is \(score)"), dismissButton: .default(Text("Continue")) {
                            self.askQuestion()
                        })
                    }
                }//End of VStack

            }//End of

        } //End of Naviagtion View


    } //End of View

    //Function to action which object is tapped
           func pictureTapped(_ tag: Int) {
               if tag == correctAnswer {

                score += 1
                alertTitle = "Correct"
               } else {

                score -= 1
                alertTitle = "Wrong"
               }
            showAlert = true
           }

    //Function to continue the game
    func askQuestion() {
        naijaObject.shuffle()
        correctAnswer = Int.random(in: 0...2)
    }
}

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

标签： swiftui

Answer 1

我想我理解你想要实现的目标，但将来最好提供更多代码。在这里，我使用DispatchQueue.main.asyncAfter(deadline: .now() + 1)了将变量更改showAlert为true. 并且运行顺利，希望对您有所帮助：

struct QuestionGame: View {

    @State private var showAlert = false
    @State private var score: Int = 0
    @State private var correctAnswer = 1
    @State private var tapped = false

    var body: some View {

        NavigationView {

            VStack {

                Text("Tap Correct Image")
                    .font(.headline)

                ForEach((0...2), id: \.self) { number in

                    Rectangle()
                        .frame(width: 100, height: 100)
                        .foregroundColor(self.tapped && number == self.correctAnswer ? .green : .black) // you can do anything for animation
                        .animation(.easeInOut(duration: 1.0))
                        .onTapGesture {
                            self.pictureTapped(number)
                    }

                }
                .navigationBarTitle(Text("answer the question"))
                .alert(isPresented: self.$showAlert) {
                    Alert(title: Text("Your score is \(score)"), dismissButton: .default(Text("Continue")) {
                        self.askQuestion()
                    })
                }

            }

        }
    }

    func pictureTapped(_ tag: Int) {

        tapped = true

        if tag == correctAnswer {
            score += 1
        } else {
            score -= 1
        }

        DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
            self.showAlert = true
        }
    }

    //Function to continue the game
    func askQuestion() {
        tapped = false
        showAlert = false
        correctAnswer = Int.random(in: 0...2)

    }

}

struct QuestionGame_Previews: PreviewProvider {
    static var previews: some View {
        QuestionGame()
    }
}

PS，不，我没有找到顺利显示警报的方法。对于这种情况ZStack，当您点击图像时，使用并将警报（或任何其他视图）不透明度从 0 更改为 1（带有动画）可能会更好。