如果我很好地理解你的情況，這里有一個演示可能實現的草圖。
這個想法是保留一個參考路徑，我們根據該參考路徑計算每個幀的臨時路徑，以生成動畫。
該解決方案的優點是您可以將其應用于任何類型的路徑。
// 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));
編輯
為了回答您的評論，為了控制動畫時間，您可以存儲動畫開始時間，并在每一幀上計算更新函數從當前時間開始所需的相對時間。
請注意，您還可以依賴GreenSock等外部動畫庫來更輕松地處理計時。
// 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));
