Paper.js - 如何设置绘制矢量或线段的持续时间？

Question

我需要设置与某些路线相关的向量（或线段），在一定时间内从A点开始到B点结束。比如说一次旅行。不幸的是，我找不到如何设置传递值的绘图时间：<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.7/paper-core.js"></script>var point1 = new Point(0, 0);var point2 = new Point(110, 200);var x = point2.x - point1.x;// = 110 - 50 = 60var y = point2.y - point1.y;// = 200 - 50 = 150;var vector = point2 - point1;// Create a Paper.js Path to draw a line into it:var path = new Path();// Give the stroke a colorpath.strokeColor = 'red';var start = vector;function onFrame(event) {    if (event.count < 101) {        path.add(start);        start += new Point(1, 1);    }}

Answer 1

如果我很好地理解你的情况，这里有一个演示可能实现的草图。

这个想法是保留一个参考路径，我们根据该参考路径计算每个帧的临时路径，以生成动画。

该解决方案的优点是您可以将其应用于任何类型的路径。

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