SwiftUI自定义SmallSpinner旋转加载动画出现异常行为问题排查

修复方案 #

代码异常来自三个可调整点：

1. 未给animation修饰符指定关联的状态值，iOS 15及以上系统要求明确指定value参数控制动画触发范围，否则会出现不可预期的过渡效果
2. 旋转角度逻辑写反，状态切换时默认从360度转向0度，会出现反向旋转或跳转动画
3. 多余的scaleEffect修饰符会让加载动画同时出现缩放效果，不需要可直接删除

修正后代码：

struct SmallSpinner: View {
    @State private var spinXSmall = false
    var body: some View {
        Circle()
            .trim(from: 1 / 4, to: 1)
            .stroke(style: StrokeStyle(lineWidth: 1, lineCap: .round, lineJoin: .round))
            .foregroundColor(Color(red: 0.6588235294, green: 0.6588235294, blue: 0.6745098039))
            .frame(width: 12, height: 12)
            .rotationEffect(.degrees(spinXSmall ? 360 : 0))
            // 如需保留缩放效果可取消下方注释
            // .scaleEffect(spinXSmall ? 1 : 0.8)
            .animation(.easeOut(duration: 1).repeatForever(autoreverses: false), value: spinXSmall)
            .onAppear {
                spinXSmall.toggle()
            }
    }
}

修改后可实现流畅的无限旋转加载效果，如需保留缩放与旋转同时生效的效果，取消scaleEffect行的注释即可。

内容的提问来源于stack exchange，提问作者LiangWang