iOS 中的蛇形渐变边框动画

Question

我正在尝试创建具有渐变颜色的蛇状视图边框动画，请参见下图。

我已经尝试过 this UIKit 解决方案，但是

CAGradientLayer

和

CAKeyframeAnimation

不起作用。它作为背景视图而不是边框出现。

我还尝试使用 SwiftUI，但渐变动画因某些动态高度和宽度而中断。以下是我使用过的 SwiftUI 代码：

struct GradientBorderAnimationView: View {
  @State var rotation:CGFloat = 0.0

  @State var width: CGFloat = 330
  @State var height: CGFloat = 100

  var body: some View {
    ZStack{
        RoundedRectangle(cornerRadius: 20, style: .continuous)
            .frame(width: width*2, height: height*2)
            .foregroundStyle(LinearGradient(gradient: Gradient(colors: [.white, .white, .blue]),
                                            startPoint: .top,
                                            endPoint: .bottom))
            .rotationEffect(.degrees(rotation))
            .mask {
                RoundedRectangle(cornerRadius: 20, style: .continuous)
                    .stroke(lineWidth: 3)
                    .frame(width: width, height: height)
            }
    }
    .ignoresSafeArea()
    .onAppear{
        withAnimation(.linear(duration: 4).repeatForever(autoreverses: false)){
            rotation = 360
        }
    }
  }
}

输出：

预期输出：

任何人都可以告诉我上面代码中的问题是什么，或者如果有人有更好的解决方案，这也有效。我对

SwiftUI

和

UIKit

任何事情都可以。

Answer 1

您应该使用

AngularGradient

，例如：