如果我很好地理解你的情況，這里有一個(gè)演示可能實(shí)現(xiàn)的草圖。
這個(gè)想法是保留一個(gè)參考路徑，我們根據(jù)該參考路徑計(jì)算每個(gè)幀的臨時(shí)路徑，以生成動(dòng)畫(huà)。
該解決方案的優(yōu)點(diǎn)是您可以將其應(yīng)用于任何類型的路徑。
// 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));
編輯
為了回答您的評(píng)論，為了控制動(dòng)畫(huà)時(shí)間，您可以存儲(chǔ)動(dòng)畫(huà)開(kāi)始時(shí)間，并在每一幀上計(jì)算更新函數(shù)從當(dāng)前時(shí)間開(kāi)始所需的相對(duì)時(shí)間。
請(qǐng)注意，您還可以依賴GreenSock等外部動(dòng)畫(huà)庫(kù)來(lái)更輕松地處理計(jì)時(shí)。
// 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));
