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

Question

我需要设置一些路线相关的vectors(or segments)，从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

如果我理解你的情况，这里有一个 sketch 演示可能的实现。
这个想法是保留一个参考路径，我们从中计算每个帧上的临时路径，以生成动画。
此解决方案的优点是您可以将其应用于任何类型的路径。

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

编辑

在回答您的评论时，为了控制动画时间，您可以存储动画开始时间，并在每一帧上计算更新功能所需的相对于当前时间的相对时间。
这是一个 sketch 证明这是对上述示例的扩展。
请注意，您还可以依赖 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));

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

Paper.js - How to set the duration of drawing vector or segment?

javascript

animation

canvas

paperjs

编辑