Início / coding / Perguntas / 79280038
Accepted
duckSern1108
Asked: 2024-12-14 12:00:35 +0800 CST

Como obter animação contínua ao alternar estados no SwiftUI?

  • 772

Tenho a seguinte interface de usuário:

insira a descrição da imagem aqui

Red Rectanglea velocidade de rotação é baseada no valor do controle deslizante. Estou conseguindo isso usando .linear(duration:).repeatForever(autoreverses: false)(duração baseada no valor do controle deslizante) e .idmodificador para parar a animação atual sempre que o valor do controle deslizante for alterado.

struct ContentView: View {
    @State private var level: Double = 0
    @State private var rotation: Double = 0
    
    var body: some View {
        VStack(spacing: 16) {
            Rectangle().fill(.red)
                .frame(width: 100, height: 100)
                .id(level)
                .rotationEffect(Angle(degrees: rotation))
                .animation(level > 0 ? .linear(duration: 2 / level).repeatForever(autoreverses: false) : .linear(duration: 2), value: rotation)
            
            Spacer().frame(height: 12)
            Slider(value: $level, in: 0...3, step: 1)
            HStack {
                Text("0")
                    .fontWeight(.semibold)
                Spacer()
                Text("1")
                    .fontWeight(.semibold)
                Spacer()
                Text("2")
                    .fontWeight(.semibold)
                Spacer()
                Text("3")
                    .fontWeight(.semibold)
            }
        }
        .padding(16)
        .onChange(of: level, perform: { _ in
            rotation += 360
        })
    }
}

Meu problema atual é quando o usuário altera o valor do controle deslizante, Rectangleele é redefinido para o estado inicial, .ido que cria uma falha.

Aqui está o link do vídeo de como meu código funciona atualmente: https://imgur.com/a/6bsUJzm

Minha pergunta é como obter uma transição suave entre estados quando o usuário altera o valor do controle deslizante? Quaisquer insights ou sugestões seriam apreciados!

1 respostas

  1. Best Answer

    Uma maneira de consertar é evitar usar .repeatForeverpara a animação. Em vez disso:

    • execute um quarto de volta.
    • ao concluir, verifique se o nível é > 0.
    • se estiver, acione outro quarto de volta.

    Desde o iOS 17, uma animação que é acionada usando withAnimationpode ter um completionretorno de chamada. Então essa seria uma maneira de acionar a animação de acompanhamento. No entanto, fazer dessa forma resulta em uma animação um tanto gaguejante.

    Uma técnica alternativa é usar um Animatable ViewModifierpara rastrear a animação e executar uma ação quando ela for concluída. Fazer dessa forma funciona mais suavemente. A resposta para SwiftUI Animation finish animation cycle fornece um modificador genérico que pode ser usado para esse propósito (foi minha resposta). Essa postagem também se preocupava com uma rotação contínua, então é um problema bem parecido.

    Aqui está o exemplo atualizado. Mais algumas notas:

    • O .idmodificador deve ser removido.

    • É importante que o modificador de animação apareça depois do AnimationCompletionCallback.

    • Como .repeatForevernão é mais usado, o modificador de animação pode ser simplificado (um operador ternário não é necessário).

    • É mais simples aplicar os .fontWeightrótulos do controle deslizante ao HStack, em vez de a cada rótulo individual.

    • Você estava usando uma versão obsoleta de .onChangeantes. Se de fato você está mirando uma versão do iOS anterior ao iOS 17, então use a versão comentada fornecida no código abaixo.

    var body: some View {
    VStack(spacing: 16) {
        Rectangle()
            .fill(.red)
            .frame(width: 100, height: 100)
            .rotationEffect(Angle(degrees: rotation))

            // See https://stackoverflow.com/a/76969841/20386264
            .modifier(
                AnimationCompletionCallback(animatedValue: rotation) {
                    if level > 0 {
                        rotation += 90
                    }
                }
            )
            .animation(.linear(duration: 2 / max(1, level)), value: rotation)
        Spacer().frame(height: 12)
        Slider(value: $level, in: 0...3, step: 1)
        HStack {
            Text("0")
            Spacer()
            Text("1")
            Spacer()
            Text("2")
            Spacer()
            Text("3")
        }
        .fontWeight(.semibold)
    }
    .padding(16)
    // Pre iOS 17: .onChange(of: level) { [oldVal = level] newVal in
    .onChange(of: level) { oldVal, newVal in
        if oldVal == 0 {
            rotation += 90
        }
    }
}

    Animação

    • 1

relate perguntas