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

Программируем под IOS
Ответить
Гость
 Рисование и анимация нескольких путей в форме в SwiftUI

Сообщение Гость »


Я пытаюсь реализовать анимацию для приведенной ниже фигуры. Для начала, в зависимости от того, является ли завершение истинным или ложным, отобразите соответствующую форму (+ или ✓). При нажатии кнопки я бы хотел, чтобы фигуры анимировались следующим образом:
[*]Если начинается с символа +: (1.) Непрозрачность горизонтальной обводки становится нулевой (2.) Верхняя часть вертикальной обводки перемещается от (midX, minY) к (minX, MidY) против часовой стрелки, чтобы сформировать левую черту символа ✓. Нижняя часть вертикального штриха остается фиксированной. Правая линия символа ✓ теперь анимируется от нижней части вертикальной линии в точке (midX, maxY) и распространяется в правый верхний угол до (maxX, minY), чтобы завершите форму. [*]Если начинается с символа ✓: (1.) Правая черта ✓ анимирует назад от (maxX, minY) до нижней точки (midX, maxY), где оба удара встречаются. (2.) Левая черта ✓ возвращается к (midX, minY), образуя вертикальную черту символа +. (3.) Наконец, горизонтальная черта символа + возвращается к непрозрачности 1. [*]Анимация фигур должна меняться при нажатии кнопки. Если пользователь быстро нажмет на кнопку, которая переключает состояние, тогда продолжительность анимации следует игнорировать, а фигуры должны просто переключаться между + и ✓, пока пользователь не отнимет нажатие кнопки; в этом случае, в зависимости от конечного состояния завершено, фигура, которая должна отображаться, должна продолжать анимироваться в поле зрения.
Сейчас происходит то, что две фигуры отображаются без какой-либо анимации. Любая помощь приветствуется.
struct TaskCompletion: Shape { вар animatableData: CGFloat { получить {вернуть прогресс} установить {прогресс = новое значение} } прогресс вар: CGFloat = 0 var завершено: Bool = false путь функции (в прямоугольнике: CGRect) -> Путь { вар путь = Путь() если завершено == false { // ОТМЕТКА: + форма // горизонтальная линия path.move(to: CGPoint(x: rect.minX, y: rect.midY)) path.addLine(to: CGPoint(x: rect.minX + (rect.maxX * прогресс), y: rect.midY)) // вертикальная линия path.move(to: CGPoint(x: rect.midX, y: rect.minY)) path.addLine(to: CGPoint(x: rect.midX, y: rect.minY + (rect.maxY * прогресс))) } еще { // ОТМЕТКА: ☑️ форма // ☑️ короткий левый удар path.move(to: CGPoint(x: rect.minX, y: rect.midY)) path.addLine(to: CGPoint(x: rect.midX, y: rect.minY + (rect.maxY * прогресс))) // ☑️ длинный правый удар path.addLine(to: CGPoint(x: 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) .оверлей { TaskCompletion (прогресс: drawProgress, завершено: завершено) .stroke(.black, lineWidth: 10.0) .frame(ширина: 200, высота: 200) } Кнопка(завершено? «Незавершено»: «Завершено») { withAnimation(.easeInOut(длительность: 0,5)) { ничьяПрогресс = 1.0 } завершено.toggle() } .buttonStyle(.borderedProminent) } .onAppear { ничьяПрогресс = 1.0 } .padding() } }
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «IOS»