I am trying to animate a gradient change but it keeps happening instantly rather than animating. My current code is as follows
struct GradientView: View {
@State var currentTopColor = Color.white
var body: some View {
LinearGradient(gradient: Gradient(colors: [currentTopColor, .white]), startPoint: .top, endPoint: .bottom)
.onTapGesture {
withAnimation(.easeInOut(duration: 1)) {
currentTopColor = [Color.blue, Color.pink, Color.red].randomElement()!
}
}
}
}

I have also tried using the .animation
modifier but the effect is the same. When I tap the background it changes instantly rather than gradually.
Can you advise why its happening instantly and how to make the gradient change be gradual with an animation?
Update Latest attempt to use bool for animation still causes instant color change @State private var animate = false
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 20)
.fill(LinearGradient(gradient: Gradient(colors: [getColor(), .white]), startPoint: .top, endPoint: .bottom))
.animation(Animation.easeInOut.speed(1.25), value: animate)
}
.frame(width: 300, height: 300)
.onTapGesture {
animate.toggle()
}
}
func getColor() -> Color {
animate ? Color.red : Color.blue
}