Currently, I am working on animating a canvas element (specifically PaperJs Path/Text) along a path using PaperJs. The process involves user-created frames containing paths drawn by the user, where each frame consists of multiple paths and corresponding canvas elements stored in arrays called text and paths respectively. The existing code executes for each frame but has limitations in terms of functionalities like pause, skip to next/back a frame, play frame, and variable speed. The current code snippet provided below attempts to animate these frames sequentially by limiting each frame's visibility to 2 seconds:
var offset = [];
for(let i = 0; i < paths.length; i++) {
offset[i] = 0;
}
var time_sec = 2;
for(let i = 0; i < paths.length; i++) {
text[i].onFrame = function(event) {
var speed = paths[i].length / time_sec;
if ((event.time > frame_num * 2) && (event.time < ((frame_num * 2) + 2))) {
text[i].fillColor = "black";
if (offset[i] < paths[i].length){
text[i].position = paths[i].getPointAt(offset[i]);
offset[i] += event.delta * speed; // speed - 150px/second
} else {
offset[i] = paths[i].length;
}
} else {
text[i].fillColor = new paper.Color(0.5, 0);
}
paper.view.draw();
}
}
I have explored adding wait times between calling animate_frame without success, as the onFrame() function from PaperJS does not execute during this waiting period. Additionally, implementing flags and while loops did not yield desired results either.
Considering my constraints with PaperJs, I am seeking alternative approaches that involve creating an animation object containing paths and canvas elements, which can be triggered by calling animation.play(). This method should also allow for waiting until a previous animation completes, enabling the sequential animation of frames. Although I am committed to using PaperJs for this project, I am open to transferring path position data to a regular JS array or exploring other packages that could align with my requirements.
Your input and ideas are highly appreciated! Thank you.