使用描边帽渐变绘制路径

Question

我正在尝试使用 WatchOS 应用程序，并想绘制一个带有动画轮廓的正方形。

我的这个工作正常

但是我想要做的是将绘制的线的末端设为不同的颜色，例如在上面的示例中。线条是蓝色的，但路径的动画末端是红色并淡入蓝色。

struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            SquarePath(height: geo.size.height - 5, width: geo.size.width - 5)
        }
    }
}


struct SquarePath: View {
    var height: CGFloat
    var width: CGFloat

    @State private var percentage: CGFloat = .zero
    var body: some View {
            Path { path in
                path.move(to: CGPoint(x: 5, y: 5))
                path.addLine(to: CGPoint(x: width, y: 5))
                path.addLine(to: CGPoint(x: width, y: height))
                path.addLine(to: CGPoint(x: 5, y: height))
                path.addLine(to: CGPoint(x: 5, y: 5))
            }
            .trim(from: 0, to: percentage)
            .stroke(Color.blue, style: StrokeStyle(lineWidth: 5, lineCap: .round, lineJoin: .round))
            .animation(.easeOut(duration: 16.0))
            .onAppear {
                self.percentage = 1.0
            }
    }
}