6.5_FollowPathEffect- 实现路径跟随动画

跟随路径效果：实现路径跟随动画

使用 GeometryEffect 协议，你可以创建令人惊叹的路径跟随动画。 🚀 这种效果让视图沿着你定义的路径移动，为你的 SwiftUI 界面增添活力。 让我们一起探索如何实现它！

创建 FollowPathEffect 结构体

首先，你需要创建一个遵循 GeometryEffect 协议的结构体。这个结构体将负责计算视图在路径上的位置。

struct FollowPathEffect: GeometryEffect {
    var pct: CGFloat

    var path: Path

    func effectValue(size: CGSize) -> ProjectionTransform {
        // 实现路径跟随逻辑
    }
}

pct 属性表示视图在路径上的进度百分比，path 属性是你希望视图跟随的路径。

实现 effectValue(size:) 方法

effectValue(size:) 方法是 GeometryEffect 的核心。你需要在这个方法中计算视图的新位置。

1. 计算路径上的点： 使用 path.length() 获取路径的总长度，然后根据 pct 计算当前位置。
2. 创建变换矩阵： 使用 CGAffineTransform 创建一个平移变换，将视图移动到计算出的位置。
3. 返回 ProjectionTransform： 将 CGAffineTransform 转换为 ProjectionTransform 并返回。

func effectValue(size: CGSize) -> ProjectionTransform {
    let pathLength = path.length()
    let point = path.point(at: pathLength * pct)

    var transform = CGAffineTransform.identity
    transform = transform.translatedBy(x: point.x - size.width / 2, y: point.y - size.height / 2)

    return ProjectionTransform(transform)
}

使用 FollowPathEffect

现在，你可以将 FollowPathEffect 应用到你的视图上。

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

    var body: some View {
        Circle()
            .frame(width: 50, height: 50)
            .foregroundColor(.blue)
            .modifier(FollowPathEffect(pct: pct, path: createPath()))
            .animation(.linear(duration: 2).repeatForever(autoreverses: true), value: pct)
            .onAppear {
                pct = 0
                pct = 1
            }
    }

    func createPath() -> Path {
        var path = Path()
        path.move(to: CGPoint(x: 50, y: 100))
        path.addCurve(to: CGPoint(x: 350, y: 100), control1: CGPoint(x: 150, y: 50), control2: CGPoint(x: 250, y: 150))
        return path
    }
}

在这个例子中，一个蓝色圆形将沿着你定义的曲线路径移动。 🎉 你可以通过调整 pct 的值来控制动画的进度。

优化你的动画

• 使用不同的路径： 尝试使用不同的路径，例如直线、矩形或更复杂的形状。
• 调整动画速度： 通过修改 animation 修饰符中的 duration 属性来调整动画的速度。
• 添加更多效果： 结合其他 GeometryEffect 或动画效果，创造更丰富的视觉体验。

通过 FollowPathEffect，你可以为你的 SwiftUI 应用添加引人入胜的路径跟随动画。 记住，实践是最好的老师！ 动手尝试，探索更多可能性吧！ 🌟