14.1_实现加载指示器动画

创建引人入胜的加载指示器动画 🚀

加载指示器动画是提升用户体验的关键！它们让用户知道应用正在后台工作，而不是卡住了。让我们一起探索如何使用 SwiftUI 创建一些令人惊艳的加载指示器动画吧！

基础圆形加载器

首先，我们来创建一个简单的圆形加载器。你可以使用 Circle 和 Trim 来实现这个效果。通过动画改变 Trim 的起始和结束值，就能让圆形看起来像在旋转。是不是很简单？

struct CircularLoader: View {
    @State private var trimValue: CGFloat = 0

    var body: some View {
        Circle()
            .trim(from: 0, to: trimValue)
            .stroke(Color.blue, style: StrokeStyle(lineWidth: 5, lineCap: .round))
            .frame(width: 50, height: 50)
            .rotationEffect(.degrees(-90))
            .onAppear {
                withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: false)) {
                    trimValue = 1
                }
            }
    }
}

• Circle() 创建一个圆形。
• .trim(from: 0, to: trimValue) 裁剪圆形，trimValue 控制裁剪的比例。
• .stroke() 设置描边颜色和样式。
• .rotationEffect() 旋转圆形，使其从顶部开始。
• .onAppear 启动动画，无限循环。

点阵跳跃加载器

这种加载器通常由几个小点组成，这些点会依次跳跃，形成一个动态的加载效果。你可以使用 ForEach 和 offset 来实现。每个点都有一个延迟的动画，这样它们就能依次跳跃。

struct DotJumpingLoader: View {
    @State private var dotOffsets: [CGFloat] = [0, 0, 0]

    var body: some View {
        HStack {
            ForEach(0..<3) { index in
                Circle()
                    .frame(width: 10, height: 10)
                    .offset(y: dotOffsets[index])
                    .animation(Animation.easeInOut(duration: 0.5).repeatForever(autoreverses: true).delay(Double(index) * 0.2), value: dotOffsets[index])
            }
        }
        .onAppear {
            dotOffsets = [-10, -10, -10]
        }
    }
}

• HStack 水平排列点。
• ForEach 创建多个点。
• .offset(y: dotOffsets[index]) 垂直偏移点，实现跳跃效果。
• .animation() 设置动画，包括缓动函数、持续时间和延迟。

进度条加载器

进度条加载器显示加载的百分比。你可以使用 Rectangle 和 GeometryReader 来实现。通过改变 Rectangle 的宽度，来模拟加载进度。

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

    var body: some View {
        GeometryReader { geometry in
            Rectangle()
                .frame(width: geometry.size.width * progress, height: 10)
                .foregroundColor(.green)
                .animation(.linear(duration: 2).repeatForever(autoreverses: false), value: progress)
        }
        .onAppear {
            progress = 1
        }
    }
}

• GeometryReader 获取父视图的尺寸。
• Rectangle() 创建一个矩形，宽度根据 progress 变化。
• .foregroundColor() 设置进度条颜色。
• .animation() 设置动画，线性变化，无限循环。

自定义形状加载器

如果你想更进一步，可以创建自定义形状的加载器。例如，你可以使用 Path 来绘制一个复杂的形状，然后通过动画改变形状的某些属性，来实现加载效果。这需要一些数学知识，但效果会非常惊艳！✨

总而言之，创建加载指示器动画是一个有趣且富有挑战性的任务。通过掌握这些基本技巧，你可以为你的应用添加各种各样的加载动画，提升用户体验。加油！💪