A
A
Anonymous123443212021-11-17 20:42:16
JavaScript
Anonymous12344321, 2021-11-17 20:42:16

Is there a library for slow animation of drawing shapes in Canvas?

For example, in canvas we can draw a line using the moveTo and lineTo functions. But at the same time, when you call stroke, this line will be drawn instantly. Is there a library that can make this line, and in general any shape on the canvas, draw slowly, over some given period of time?
In general, I am writing a program that renders a binary search tree and I would like the animation of drawing nodes and edges to them to be smooth.
PS I already tried to write a separate function that would draw lines and circles in small parts with slowdown. Here is an example for a circle

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();


     }
}


The animation turned out great, but the problem is that here we had to use asynchronous functions to implement sleep. Because of this, my original algorithm completely stopped working, because it is designed so that when creating a vertex, which is an object that, in addition to the right and left children, contains the data field, which stores the coordinates of this vertex for displaying it on canvas. It so happened that because of asynchronous functions, promises began to return instead of objects, and as a result, the original algorithm failed, it is extremely problematic to fix

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Ravil, 2021-11-18
@Anonymous12344321

Hey!
One of the popular ones is GSAP
Also, smoothness can be implemented natively - setInterval or requestAnimationFrame

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question