SwiftUI中如何实现视图边框渐变动画效果？

你的代码目前只是绑定了动画开关，但没有让渐变本身产生位移变化，所以看不到预期的流动效果。下面提供两种可行的实现方式：

方法1：通过动画渐变的起始/结束点（兼容iOS15+） #

我们可以让渐变的起点和终点沿着边框循环移动，配合无限重复的动画来实现流动效果：

struct AnimatedBorderView: View {
    @State private var animateGradient = false
    let gradient = Gradient(colors: [.blue, .purple, .pink, .blue])
    
    var body: some View {
        Text("渐变边框示例")
            .padding()
            .overlay {
                Rectangle()
                    .stroke(
                        LinearGradient(
                            gradient: gradient,
                            startPoint: animateGradient ? .topLeading : .bottomTrailing,
                            endPoint: animateGradient ? .bottomTrailing : .topLeading
                        )
                    )
                    .animation(.linear(duration: 3).repeatForever(autoreverses: false), value: animateGradient)
            }
            .onAppear {
                animateGradient = true
            }
    }
}

方法2：使用phaseAnimator（iOS17+ 更简洁） #

iOS17新增的phaseAnimator可以更直观地控制渐变的偏移相位：

struct AnimatedBorderView: View {
    let gradient = Gradient(colors: [.cyan, .teal, .cyan])
    
    var body: some View {
        Text("渐变边框示例")
            .padding()
            .overlay {
                Rectangle()
                    .stroke(
                        LinearGradient(
                            gradient: gradient,
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                        .offset(x: 100) // 偏移量控制流动范围
                    )
                    .phaseAnimator(0...1) { content, phase in
                        content.offset(x: phase * 200)
                    } animation: { phase in
                        .linear(duration: 3).repeatForever(autoreverses: false)
                    }
            }
    }
}

关键说明： #

• 第一种方法通过切换渐变的起点终点，让渐变色彩沿着边框循环流动
• 第二种方法通过偏移渐变图层，实现更流畅的横向（或纵向）流动效果，你可以调整offset的参数来改变流动方向和速度
• 如果需要圆角边框，只需给Rectangle添加.cornerRadius()修饰符即可

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