Как создать индикатор выполнения в форме круга или кольца для загрузки экранов или инфографики с помощью холста HTML и JavaScript
Концептуальные чертежи для предстоящего внештатного проекта требуют круглого индикатора выполнения для визуализации некоторых данных. Рассмотрев несколько различных решений, я выбрал холст HTML и JavaScript, потому что они очень полезны для такого типа интерактивных и анимированных элементов. Для базовой реализации требуется всего несколько строк JavaScript, и ее можно легко превратить в очень настраиваемый класс для многих случаев использования.
Как создать круговой индикатор выполнения
Функции рисования холста очень удобны для создания индикатора выполнения в форме круга или кольца. Наиболее важной функцией является context.arc( xCenter , yCenter , radius , startAngle , endAngle ), которую можно использовать для рисования кругов или участков круга. Если вы объедините его со свойством context.lineWidth, вы можете нарисовать более толстую линию, и это почти все, что нам нужно для круглого индикатора выполнения.
В приведенном выше примере рисуется полный круг (от 0 до 2π) с радиусом 50 пикселей при 100|100. Мы также можем нарисовать второй чуть менее толстый круг поверх него, чтобы создать индикатор выполнения с фоном и рамкой.
Стоит отметить, что 0 градусов в функции дуги соответствуют левой стороне круга, а не вершине. Если мы хотим, чтобы наш индикатор выполнения начинался и заканчивался вверху, нам просто нужно добавить 3/2π к обоим углам.
Создание класса JavaScript
Как вы можете видеть из приведенного выше примера, очень просто создать базовый круговой индикатор выполнения. Однако я хотел добавить еще несколько функций и инкапсулировать все в класс JavaScript. Помимо ссылки на контекст рисования холста, конструктор также имеет необязательный аргумент параметров, который можно использовать для настройки внешнего вида индикатора выполнения.
Основная причина, по которой я хотел создать класс JavaScript для индикатора выполнения, заключалась в том, чтобы иметь простой способ его анимировать. Поэтому я добавил функцию animateTo( percent , time ), которая автоматически изменяет значение индикатора выполнения в течение time секунд на новое значение percent. Под капотом он просто использует функцию setTimeout() для обновления индикатора выполнения 50 раз в секунду, пока не будет достигнуто новое значение.
Причина, по которой функции animateTo() и setPercent() вызывают обратный вызов onchange() класса вместо непосредственного обновления холста, заключается в экономии ресурсов. Если бы на одном холсте было несколько индикаторов выполнения, и все они запускали бы анимацию, каждый отдельный индикатор выполнения вызывал бы перерисовку холста, что потенциально может происходить сотни раз в секунду. В этом случае гораздо лучше обновлять холст только в соответствии с частотой обновления монитора (requestAnimationFrame()) и рисовать все индикаторы выполнения в одной функции.
Применение
Ниже приведен пример использования класса индикатора выполнения круга. Поскольку в этом простом примере холст используется только для рисования индикатора выполнения, холст перерисовывается только при изменении значения индикатора выполнения, что делается путем установки и реализации обратного вызова onchange() класса.
Живой пример
Я загрузил простой пример на свой сайт, если хотите увидеть его в действии.
Круглые индикаторы выполнения очень полезны и удивительно просты в реализации. Помимо его собственного использования в качестве фактического индикатора выполнения, есть много других ситуаций и дизайнов, где они пригодятся. В моем предстоящем проекте я собираюсь использовать его в интерактивной инфографике для визуализации и анимации между различными значениями. С некоторыми изменениями ту же идею реализации можно использовать для создания круговой или кольцевой диаграммы. Элемент холста HTML в целом чрезвычайно универсален и часто работает лучше, чем сложные конструкции HTML и CSS для тех же случаев использования.
