Как я могу переместить этот зеленый прямоугольник с закругленными углами дальше вниз

Question

Я бы хотел, чтобы первое изображение (зеленый контур) соответствовало второму изображению (синий контур). Мне трудно понять, как я могу переместить закругленный прямоугольник (зеленый контур) дальше вниз, чтобы соответствовать тому, как будет выглядеть второе изображение. Я прикрепил свой код ниже. Пожалуйста, дайте мне знать, если мне нужна дополнительная информация.

var color1 = #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
var color2 = #colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1)
    var width: CGFloat = 300
    var height: CGFloat = 100
    var percent: CGFloat = 7
    @Binding var show: Bool

var body: some View {
    let multiplier = width / 44
    let progress = 1 - percent / 100

    return ZStack {
        RoundedRectangle(cornerRadius: 20, style: .continuous)
            .stroke(Color.black.opacity(0.1), style: StrokeStyle(lineWidth: multiplier))
            .frame(width: width, height: height)

        RoundedRectangle(cornerRadius: 20, style: .continuous)

            .trim(from: show ? 0.90 : 1, to: 1)
            .stroke(LinearGradient(gradient: Gradient(colors: [Color(color1), Color(color2)]), startPoint: .leading, endPoint: .bottomTrailing),
                    style: StrokeStyle(lineWidth: 2 * multiplier, lineCap: .round, lineJoin: .round, miterLimit: .infinity, dash: [20,0], dashPhase: 0))
            .frame(width: width, height: height)
    }
}

Answer 1

Вы можете получить желаемый результат, изменив начальную и конечную позиции trim на следующие.

.trim(from: show ? 0.90 : 0.93, to: 0.93)

Результат: