Рисование и анимация нескольких путей в форме в SwiftUI ⇐ IOS

[Гость]

Я пытаюсь реализовать анимацию, как показано ниже.





Начнем с того, что завершение является истинным или ложным, чтобы отобразить соответствующую форму (+ или ✓). При нажатии кнопки я бы хотел, чтобы фигуры анимировались, как показано на изображении выше. Насколько я понимаю:
[*]Если начинается с символа +: (1.) Непрозрачность горизонтальной обводки становится нулевой (2.) Верхняя часть вертикальной обводки перемещается от (midX, minY) к (minX, MidY) против часовой стрелки, чтобы сформировать левую черту символа ✓. Нижняя часть вертикального штриха остается фиксированной. Правая линия символа ✓ теперь анимируется от нижней части вертикальной линии в точке (midX, maxY) и распространяется в правый верхний угол до (maxX, minY), чтобы завершите форму. [*]Если начинается с символа ✓: (1.) Правая черта ✓ анимирует назад от (maxX, minY) до нижней точки (midX, maxY), где оба удара встречаются. (2.) Левая черта ✓ возвращается к (midX, minY), образуя вертикальную черту символа +. (3.) Наконец, горизонтальная черта символа + возвращается к непрозрачности 1. [*]Анимация фигур должна меняться при нажатии кнопки. Если пользователь быстро нажмет на кнопку, которая переключает состояние, тогда продолжительность анимации следует игнорировать, а фигуры должны просто переключаться между + и ✓, пока пользователь не отнимет нажатие кнопки; в этом случае, в зависимости от конечного состояния завершено, фигура, которая должна отображаться, должна продолжать анимироваться в поле зрения.
Изменить: обновлен код для использования различных форм сегментов линий. Однако правая черта символа ✓ не анимирует рисунок пути. Также анимация не меняет правильное направление при переключении между фигурами.

Любая помощь приветствуется.
struct LineSegment1: Shape { путь функции (в прямоугольнике: CGRect) -> Путь { вар путь = Путь() // MARK: + горизонтальная линия фигуры path.move(to: CGPoint(x: rect.minX, y: rect.midY)) path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY)) Обратный путь } } структура LineSegment2: Форма { вар конечная точка: CGPoint var animatableData: AnimatablePair { получить { AnimatablePair(endPoint.x, endPoint.y) } набор { endPoint.x = новоезначение.первый endPoint.y = новоеЗначение.секунда } } // ОТМЕТКА: ＋ вертикальная линия фигуры и левая обводка фигуры путь функции (в прямоугольнике: CGRect) -> Путь { пусть start = CGPoint(x: rect.midX, y: rect.maxY) let end = CGPoint(x: endPoint.x * rect.width, y: endPoint.y * rect.height) вар путь = Путь() path.move(к: начало) path.addLine(до: конца) Обратный путь } } структура LineSegment3: Форма { вар animatableData: CGFloat { получить {вернуть прогресс} установить {прогресс = новое значение} } прогресс вар: CGFloat = 0 путь функции (в прямоугольнике: CGRect) -> Путь { вар путь = Путь() // ОТМЕТКА: фигура, правый штрих path.move(to: CGPoint(x: rect.midX, y: rect.maxY)) path.addLine(to: CGPoint(x: rect.minX + (rect.maxX * прогресс), y: rect.minY)) Обратный путь } } struct ContentView: Просмотр { @State Private var drawProgress: CGFloat = 0.0 @State Private var завершено: Bool = false var body: some View { ВСтек { RoundedRectangle (cornerRadius: 5) .frame(ширина: 300, высота: 300) .foregroundColor(.red) .оверлей { ZStack { ЛинияСегмент1() .stroke(.white, lineWidth: 4.0) .opacity(завершено? 0: 1) .frame(ширина: 200, высота: 200) LineSegment2(конечная точка: CGPoint( х: завершено? 0,0 : 0,5, y: завершено? 0,5 : 0,0)) .stroke(завершено? .yellow: .white, lineWidth: 4.0) .frame(ширина: 200, высота: 200) LineSegment3 (прогресс: drawProgress) .stroke(.yellow, lineWidth: 4.0) .opacity(завершено? 1:0) .frame(ширина: 200, высота: 200) } } Кнопка(завершено? «Незавершено»: «Завершено») { withAnimation(.easeInOut(длительность: 0,5)) { ничьяПрогресс = 1.0 завершено.toggle() } } .buttonStyle(.borderedProminent) Разделитель() } .padding() } }