Почему изображение становится размытым после применения 3D-эффекта вращения в SwiftUI? - PullRequest
Новая
       6

Почему изображение становится размытым после применения 3D-эффекта вращения в SwiftUI?

0 голосов
/ 01 августа 2020

Я изучал анимацию в SwiftUI через hackingwithswift.com, и в рамках этого я создал небольшое приложение, в котором, если пользователь выберет правильный ответ (флаг страны), изображение будет вращаться на 360 градусов по оси Y.

После того, как я применил поворот, изображение становится размытым. См. Изображения ниже

Экран запуска enter image description here

After I click the correct flag (Compare the flag in below and above image) enter image description here

After the new game re-loaded (The placeholder is now showing next image blur as well) введите описание изображения здесь

Ниже приведен соответствующий код SwiftUI.

Любое предложение, почему изображение становится размытым после поворота?

Я удалил анимацию, и размытия не происходит. Кроме того, размытие остается неизменным, какую бы правильную кнопку я ни нажимал. На изображениях выше я только что показал первый экземпляр. Я временно отключил поле Alert, чтобы посмотреть, не вызывает ли отображение Alert такое странное поведение, но все еще размывается. 

    struct FlagImage : View{
    var image: Image
    
    var body: some View{
        image
            .renderingMode(.original)
    }
}


var body: some View {
    ZStack{
        LinearGradient(gradient: Gradient(colors: [.blue, .black]), startPoint: .top, endPoint: .bottom).edgesIgnoringSafeArea(.all)
        
        VStack{
            Text("Pick the flag for")
            
            Text(countryFlags[correctAnswer])
                .font(.largeTitle)
                .fontWeight(.black)
            
            VStack{
                ForEach(0..<3) { number in
                    Button(action: {
                        if number == self.correctAnswer {
                            withAnimation {
                                self.rotationAngle += 360
                            }
                        }
                        self.flagClicked(number)
    
                    }) {
                        FlagImage(image: Image(self.countryFlags[number]))
                            .rotation3DEffect(.degrees((number == self.correctAnswer) ? self.rotationAngle : 0.0), axis: (x:0, y:1, z:0))
                    }
                }
                
                Text("Your score is \(self.userScore)")
            }.alert(isPresented: $showingResult) {
                Alert.init(title: Text("Result"), message: Text(self.resultMessage), dismissButton: .default(Text("Continue"), action: {
                    self.correctAnswer = Int.random(in: 0...2)
                    self.countryFlags.shuffle()
                    self.rotationAngle = 0.0
                }))
            }
            Spacer()
        }
    }
}

private func flagClicked(_ number: Int){
    if number == self.correctAnswer{
        self.userScore += 1
        self.resultMessage = "You picked correct flag.\nYour score is \(self.userScore)"
    }
    else{
        self.userScore -= 1
        self.resultMessage = "Wrong! Thats the flag for \(self.countryFlags[number]).\nYour score is \(self.userScore)"
    }
    self.showingResult.toggle()
}

1 Ответ

0 голосов
/ 01 августа 2020

Целью было повернуть кнопку флага, а не изображение флага. После того, как я прикрепил код поворота к кнопке, я получил то, что искал. 

VStack{
                    ForEach(0..<3) { number in
                        Button(action: {
                            self.flagClicked(number)
                        }) {
                            FlagImage(image: Image(self.countryFlags[number]))
                        }.rotation3DEffect(.degrees((number == self.correctAnswer) ? self.rotationAngle : 0.0), axis: (x:0, y:1, z:0))
              
                    }
...