11.3_Trim 修剪动画- strokeStart, strokeEnd

在 SwiftUI 动画中，strokeStart 和 strokeEnd 是两个非常强大的属性，它们允许你通过控制形状描边的起始和结束位置，来创建引人入胜的动画效果。让我们一起探索如何使用它们吧！🚀

理解 strokeStart 和 strokeEnd

strokeStart 和 strokeEnd 都是 Animatable 属性，取值范围是 0 到 1。

• strokeStart：定义描边开始的位置，0 表示描边的起点，1 表示描边的终点。
• strokeEnd：定义描边结束的位置，0 表示描边的起点，1 表示描边的终点。

通过动画改变这两个属性，你可以实现描边逐渐显示或消失的效果。是不是很酷？😎

创建基本的 Trim 动画

要创建一个基本的 Trim 动画，你需要：

1. 创建一个 Shape。
2. 设置 stroke 的颜色和宽度。
3. 使用 .trim(from: strokeStart, to: strokeEnd) 修改器来控制描边的显示。
4. 使用 withAnimation 来动画改变 strokeStart 和 strokeEnd 的值。

例如，让一条线从无到有地绘制出来：

struct ContentView: View {
    @State private var progress: CGFloat = 0

    var body: some View {
        Circle()
            .trim(from: 0, to: progress)
            .stroke(Color.blue, style: StrokeStyle(lineWidth: 5, lineCap: .round))
            .frame(width: 100, height: 100)
            .onAppear {
                withAnimation(.linear(duration: 2)) {
                    progress = 1
                }
            }
    }
}

在这个例子中，我们使用 Circle() 作为形状，并通过动画改变 progress 的值，从而控制 strokeEnd 的值，实现圆形逐渐绘制的效果。🎉

高级 Trim 动画技巧

• 组合动画：你可以同时动画改变 strokeStart 和 strokeEnd，创造更复杂的动画效果。例如，让描边从中间向两边展开。
• 使用不同的 TimingCurve：通过调整 withAnimation 中的 TimingCurve，你可以改变动画的速度曲线，让动画更自然。
• 利用 onAppear 和 onDisappear：在视图出现和消失时触发动画，可以创建更流畅的用户体验。

以下是一些可以尝试的动画效果：

1. 加载指示器：创建一个圆形加载指示器，通过循环动画改变 strokeStart 和 strokeEnd 的值。
2. 进度条：创建一个进度条，根据任务的完成度动画改变 strokeEnd 的值。
3. 手写效果：模拟手写文字的效果，通过动画改变 strokeEnd 的值，让文字逐笔显示。

希望这些技巧能帮助你创建出令人惊艳的 SwiftUI 动画！加油！💪