Início / coding / Perguntas / 76932991
Accepted
MoshiMoshi
Asked: 2023-08-19 07:22:55 +0800 CST

Como deixar a animação mais lenta SwiftUI

  • 772

Implementei uma imagem com uma animação rotativa junto com três botões para ajustar a velocidade de rotação. A velocidade é controlada modificando a duração da animação. No entanto, estou enfrentando um problema em que tentar desacelerar a animação resulta em uma aceleração contínua.

Aqui está o meu trecho de código:

import SwiftUI

struct ContentView: View {
    
    @State private var rotationAngle: Angle = .degrees(0)
    @State var imageSpeed  : Double = 1.5
    var body: some View {
        VStack {
            Image("j")
                .resizable()
                .frame(width: 100, height: 100)
                .rotationEffect(rotationAngle, anchor: .center)
                .onChange(of: imageSpeed){ _ in
                    rotationAngle = .degrees(0)
                    let animation = Animation.linear(duration: imageSpeed).repeatForever(autoreverses: false)
                    withAnimation(animation) {
                        
                        rotationAngle = .degrees(360)
                        
                    }
                    print(imageSpeed)
                }
            HStack {
                Button(action: {
                    
                    imageSpeed = 4
                }) {
                    Text("Slow")
                    
                }
                
                Button(action: {
                    imageSpeed = 1
                }) {
                    Text("Fast")
                }
                
                Button(action: {
                    imageSpeed = 0.0
                }) {
                    Text("Stop")
                }
            }
            .padding(.top, 20)
        }
    }
}


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

Eu tentei o código acima, mas não produziu o resultado esperado. Eu realmente apreciaria qualquer ajuda com este problema.

swiftui

1 respostas

  1. Best Answer

    Você precisa parar a animação anterior ao iniciar uma nova. Uma maneira fácil de fazer isso é começar com uma nova instância do Image. Ao adicionar um .id()à imagem, você pode iniciar uma nova instância alterando o id.

    Abaixo, apresentei um @State private var imageidque rastreia o arquivo id. Quando as imageSpeedalterações, incremente o imageide ele iniciará uma nova instância usando o new atual imageSpeed:

    struct ContentView: View {
    
    @State private var rotationAngle: Angle = .degrees(0)
    @State var imageSpeed  : Double = 1.5
    @State private var imageid = 0
    var body: some View {
        VStack {
            Image("j")
                .resizable()
                .frame(width: 100, height: 100)
                .rotationEffect(rotationAngle, anchor: .center)
                .id(imageid)
                .onChange(of: imageSpeed){ _ in
                    imageid += 1
                    rotationAngle = .degrees(0)
                    let animation = Animation.linear(duration: imageSpeed).repeatForever(autoreverses: false)
                    withAnimation(animation) {
                        
                        rotationAngle = .degrees(360)
                        
                    }
                    print(imageSpeed)
                }
            HStack {
                Button(action: {
                    
                    imageSpeed = 4
                }) {
                    Text("Slow")
                    
                }
                
                Button(action: {
                    imageSpeed = 1
                }) {
                    Text("Fast")
                }
                
                Button(action: {
                    imageSpeed = 0.0
                }) {
                    Text("Stop")
                }
            }
            .padding(.top, 20)
        }
    }
}

    Solução Alternativa

    Desde então, a mudança imageSpeeddesencadeia a necessidade de uma nova animação de imagem, poderíamos simplesmente adicionar:

    .id(imageSpeed)

    para Imageeliminar a necessidade de introduzir outra @Statevariável.

    • 1

relate perguntas