If I understand your case well, here is a sketch demonstrating a possible implementation.
The idea is to keep a reference path from which we calculate a temporary path on each frame, in order to produce the animation.
The advantage of this solution is that you can apply it to any kind of path.
// Create a path to animate.
const path = new Path.Circle({
center: view.center,
radius: 50,
selected: true,
closed: false
});
// Initialize the time variable that will control the animation.
let time = 0;
// On each frame...
function onFrame() {
// ...if the animation is not finished yet...
if (time <= 1) {
// ...animate.
time += 0.01;
drawTmpPath(time);
}
}
// Initialize the temporary path that will display our animation.
let tmpPath;
function drawTmpPath(t) {
// Make sure that t is never over 1.
t = Math.min(t, 1);
// Remove the previously drawn temporary path.
if (tmpPath) {
tmpPath.remove();
}
// Draw the new temporary path from the reference one.
tmpPath = path.clone().set({
selected: false,
strokeColor: 'orange',
strokeWidth: 5
});
// Split it at the appropriate location.
const remainingPath = tmpPath.splitAt(tmpPath.length * t);
// Remove the eventual remaining part.
if (remainingPath) {
remainingPath.remove();
}
}
// Scale things up.
project.activeLayer.fitBounds(view.bounds.scale(0.8));
Edit
In answer to your comment, in order to have control over the animation time, you can store your animation starting time and, on each frame, calculate the relative time that the update function needs from the current time.
Here is a sketch demonstrating this as an extension of the above example.
Note that you could also rely on an external animation library like GreenSock to handle the timing more easily.
// Total animation time in milliseconds.
const totalTime = 10000;
// Create a path to animate.
const path = new Path.Circle({
center: view.center,
radius: 50,
selected: true,
closed: false
});
// Initialize the time variable that will control the animation.
const startTime = Date.now();
let animationDone = false;
// On each frame...
function onFrame() {
// ...if the animation is not finished yet...
if (!animationDone) {
// ...calculate the relative time needed to draw the tmp path.
const relativeTime = (Date.now() - startTime) / totalTime;
// ...animate.
if (relativeTime < 1) {
drawTmpPath(relativeTime);
} else {
drawTmpPath(1);
animationDone = true;
}
}
}
// Initialize the temporary path that will display our animation.
let tmpPath;
function drawTmpPath(t) {
// Make sure that t is never over 1.
t = Math.min(t, 1);
// Remove the previously drawn temporary path.
if (tmpPath) {
tmpPath.remove();
}
// Draw the new temporary path from the reference one.
tmpPath = path.clone().set({
selected: false,
strokeColor: 'orange',
strokeWidth: 5
});
// Split it at the appropriate location.
const remainingPath = tmpPath.splitAt(tmpPath.length * t);
// Remove the eventual remaining part.
if (remainingPath) {
remainingPath.remove();
}
}
// Scale things up.
project.activeLayer.fitBounds(view.bounds.scale(0.8));