SwiftUI动画重复修饰符repeatForever

.repeatForever(autoreverses: true) 是 SwiftUI 动画系统中的一个修饰符，用于定义动画如何重复。它会让动画在完成一个循环后，反向播放并重复这个过程，形成一个往复循环的效果。

具体作用

.repeatForever：让动画无限循环，永远不会停止。

autoreverses: true：在每次动画结束后，自动反向播放动画（从结束位置返回到起始位置）。

如果 autoreverses 设置为 false，动画会在结束后直接重新从头开始，而不会反向播放。

用法示例

1、基础动画：正反往复

struct RepeatingAnimation: View {
    @State private var offset: CGFloat = 0

    var body: some View {
        Circle()
            .frame(width: 50, height: 50)
            .offset(y: offset)
            .onAppear {
                withAnimation(.linear(duration: 1).repeatForever(autoreverses: true)) {
                    offset = 200 // Circle 从 0 到 200，再从 200 返回到 0，循环播放
                }
            }
    }
}

动画效果：

Circle 从顶部向下移动到 200，然后反向回到顶部。

整个过程无限重复。

2、取消 autoreverses

如果将 autoreverses 设置为 false，动画不会反向播放：

struct NonReversingAnimation: View {
    @State private var offset: CGFloat = 0

    var body: some View {
        Circle()
            .frame(width: 50, height: 50)
            .offset(y: offset)
            .onAppear {
                withAnimation(.linear(duration: 1).repeatForever(autoreverses: false)) {
                    offset = 200 // Circle 从 0 到 200，到达后直接跳回 0，重复播放
                }
            }
    }
}

动画效果：

Circle 向下移动到 200，然后瞬间跳回顶部并重新开始移动。

适合的动画场景

1、往返动画（autoreverses: true）

模拟物体的弹跳、摆动、呼吸效果等：

视图颜色渐变：

struct BreathingEffect: View {
    @State private var opacity = 1.0

    var body: some View {
        Circle()
            .frame(width: 50, height: 50)
            .opacity(opacity)
            .onAppear {
                withAnimation(.easeInOut(duration: 1).repeatForever(autoreverses: true)) {
                    opacity = 0.5 // 透明度在 1 和 0.5 之间往返
                }
            }
    }
}

旋转效果：

struct RotatingEffect: View {
    @State private var angle: Double = 0

    var body: some View {
        Rectangle()
            .frame(width: 100, height: 100)
            .rotationEffect(.degrees(angle))
            .onAppear {
                withAnimation(.linear(duration: 1).repeatForever(autoreverses: true)) {
                    angle = 45 // 视图在 0° 和 45° 之间摆动
                }
            }
    }
}

2、单向循环（autoreverses: false）

模拟连续滚动、加载动画等场景：

滚动条：

struct ScrollingBar: View {
    @State private var xOffset: CGFloat = -300

    var body: some View {
        Rectangle()
            .frame(width: 100, height: 5)
            .offset(x: xOffset)
            .onAppear {
                withAnimation(.linear(duration: 2).repeatForever(autoreverses: false)) {
                    xOffset = 300 // 滚动条从左到右无限循环
                }
            }
    }
}

核心概念和工作原理

1、动画的定义：

.repeatForever：告诉 SwiftUI 动画要永远重复。

autoreverses 的选择决定了动画是否在每次完成后反向播放。

2、播放过程：

autoreverses: true：

第一次播放：从起始状态 → 动画目标。

自动反向播放：动画目标 → 起始状态。

不断重复往返。

autoreverses: false：

第一次播放：从起始状态 → 动画目标。

动画结束后立即跳回起始状态。

不断从头开始重复。

3、时间线与循环：

动画持续时间由 .linear(duration:) 或其他曲线定义。

循环会一直按时间线重复执行。

总结

.repeatForever(autoreverses: true) 是一个强大的动画修饰符，特别适合模拟往返运动，例如弹跳、呼吸、摆动等效果。通过改变 autoreverses 的值，可以轻松切换到连续循环的效果，适用于加载指示器等场景。