Tenho a seguinte interface de usuário:
Red Rectangle
a 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 .id
modificador 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, Rectangle
ele é redefinido para o estado inicial, .id
o 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!