SwiftUI sync/mask trim 两个圆圈叠加

Question

我确信对此有一个非常简单的解决方案，但我无法解决。我用另一个填充了 LinearGradient 的 Circle 覆盖了一个 Circle。我想用 LinearGradient（动态）旋转圆而不旋转主圆。

那是因为我在我的主圆上使用“trim”并且我希望 trimming 从顶部开始，这就是我将主圆旋转 270 度的原因。

目前，我当然看不到 trimmed 第一个圆圈，因为它与第二个圆圈重叠。有没有办法屏蔽第二个圆圈，使其与 trimmed 主圆圈同步？

编辑：我添加了一个 .mask，但我不喜欢该代码，因为它是多余的。将结构放入其中会有所帮助。是应该这样做还是有更简单的方法？

谢谢！

import SwiftUI


struct ContentView: View {
    @State var myRotation: Double = 90
    var body: some View {
        Circle()
            .trim(from: 0.0, to: CGFloat(0.5))
            .stroke(style: StrokeStyle(lineWidth: 30))
            .overlay(
                
                Circle()
                    .stroke(style: StrokeStyle(lineWidth: 30))
                    .fill(LinearGradient(
                        gradient: .init(colors: [Color.red, Color.orange]),
                        startPoint: .top,
                        endPoint: .bottom
                    ))
                    .rotationEffect(Angle(degrees: self.myRotation))
                    .mask(Circle()
                        .trim(from: 0.0, to: CGFloat(0.5))
                        .stroke(style: StrokeStyle(lineWidth: 30)))
            )
            .rotationEffect(Angle(degrees: 270))
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

下面是相同的删除冗余（虽然我不确定我是否达到了你的最终目标）。

使用 Xcode 12b

测试

struct ContentView: View {
    @State var myRotation: Double = 90
    var body: some View {
        Circle()
            .stroke(style: StrokeStyle(lineWidth: 30))
            .fill(LinearGradient(
                gradient: .init(colors: [Color.red, Color.orange]),
                startPoint: .top,
                endPoint: .bottom
            ))
            .rotationEffect(Angle(degrees: self.myRotation))
            .mask(Circle()
                    .trim(from: 0.0, to: CGFloat(0.5))
                    .stroke(style: StrokeStyle(lineWidth: 30)))
            .rotationEffect(Angle(degrees: 270))
            .padding()
    }
}

SwiftUI sync/mask trim 两个圆圈叠加

SwiftUI sync/mask trim of two circles with overlay

xcode

geometry

gradient

swift

swiftui