К примеру, в canvas мы можем нарисовать линию при помощи функций moveTo и lineTo. Но при этом при вызове stroke данная линия будет нарисована моментально. Есть ли библиотека, которая может сделать так, чтобы эта линия и вообще любая фигура в canvas рисовалась замедленно, по какому-то заданному промежутку времени?
В общем, я пишу программу, которая визуализирует бинарное дерево поиска и хотелось бы, чтобы анимация рисования узлов и ребер к ним была плавной.
P.S я уже пытался написать отдельную функцию, которая рисовала бы линии и окружности по маленьким частям с замедлением. Вот пример для окружности
async function drawAnimaneCircle(x, y)
{
let i = 0;
while(i < (Math.PI * 2))
{
await sleep(15);
context.beginPath();
context.strokeStyle = "red";
context.arc(x, y + R, R, -Math.PI / 2, i);
i += Math.PI / 24;
context.stroke();
}
}
Анимация получилась отличная, но проблема в том, что здесь для для реализации sleep пришлось использовать асинхронные функции. Из-за этого мой первоначальный алгоритм полностью перестал работать, поскольку он устроен так, что при создании вершины, которая представляет собой объект, который помимо правого и левого потомка содержит поле data, которое хранит координаты данной вершины для ее отображения на canvas. Так получилось, что из-за асинхронных функций вместо объектов начали возвращаться промисы и в итоге первоначальный алгоритм отказал, исправить крайне проблематично
