Анимационный линейный график с круговыми точками

Question

Я наткнулся на интересную проблему, и я не уверен, как ее решить. У меня есть линейный график, на котором точки данных отмечены круговыми точками. На данный момент я создаю один CAShapeLayer для самой линии, а также CAShapeLayer для каждой точки.

Линия анимируется с помощью пути анимационного пути strokeEnd. И он работает. Тем не менее, слегка отрицательный эффект заключается в том, что как только я открываю график, я вижу все уже набранные точки данных, а затем через них анимируется линия.

В идеале я хотел бы изменить это поведение таким образом, чтобы в начале ничего не показывалось и по мере того, как линия получает анимированные точки данных, нарисовывается, как только линия проходит через них.

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

Может ли кто-нибудь направить меня в правильном направлении?

Answer 1

Есть много способов справиться с этим.

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

Вы также можете изменить свой метод рисования, чтобы добавить новые сегменты линии к вашему пути графика по одному, по таймеру и одновременно добавить точечные фигуры. Это даст вам пошаговую анимацию, а не гладкую линию.