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 = 60

var 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 color

path.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));