我一直在学习路径、形状和更多的东西，并尝试通过制作一个有很多动画可能性的矩形来练习。我得到的结果是非常出乎意料的（对我来说）。我使用的渐变在每个动画中都很奇怪
我试过查看是否有任何值意外更改，但没有效果。以下代码有此问题：

import SwiftUI

struct ColorCyclingCircle: View, Animatable {
    var amount = 0.0
    var steps = 100.0
    
    var saturation = 1.0
    var brightness1 = 1.0
    var brightness2 = 0.5
    
    var animatableData: AnimatablePair<AnimatablePair<Double, Double>, Double> {
        get { AnimatablePair(AnimatablePair(steps, amount), saturation) }
        set {
            steps = newValue.first.first
            amount = newValue.first.first
            saturation = newValue.second
        }
    }
    
    var body: some View {
        ZStack {
            ForEach(0..<Int(steps), id: \.self) { value in
                Rectangle()
                    .inset(by: Double(value))
                    .strokeBorder(
                        LinearGradient(
                            gradient: Gradient(colors: [
                                color(for: value, brightness: brightness1),
                                color(for: value, brightness: brightness2)
                            ]),
                            startPoint: .top,
                            endPoint: .bottom
                        ),
                        lineWidth: 2
                    )
            }
        }
        .drawingGroup()
    }

    func color(for value: Int, brightness: Double) -> Color {
        var targetHue = Double(value) / Double(steps) + amount

        if targetHue > 1 {
            targetHue -= 1
        }

        return Color(hue: targetHue, saturation: saturation, brightness: brightness)
    }
}

struct ContentView: View {
    @State private var colorCycle = 0.0
    @State private var steps = 100.0
    @State private var saturation = 1.0
    @State private var brightness1 = 1.0
    @State private var brightness2 = 0.5

    var body: some View {
        VStack {
            ColorCyclingCircle(amount: colorCycle, steps: steps, saturation: saturation, brightness1: brightness1, brightness2: brightness2)
                .frame(width: 300, height: 300)
                .onTapGesture {
                    withAnimation() {
                        saturation = saturation == 1 ? 0 : 1
                        colorCycle = colorCycle == 1 ? 0 : 1
                        saturation = saturation == 1 ? 0 : 1
                    }
                }

            Spacer()
                .frame(height: 100)
            
            Text("Color")
            Slider(value: $colorCycle)
            Text("Saturation")
            Slider(value: $saturation)
            Text("Brightness")
            Slider(value: $brightness1)
            Slider(value: $brightness2)
        }
    }
}

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