动画 Paper.js 路径段和句柄信息

Question

我正在尝试使用 Paper.js 和 Tween.js 在两条复杂路径之间制作动画。我已经非常接近了，我可以将路径中的所有点移动到正确的最终位置，但是我在处理每个段的 handleIn 和 handleOut 时遇到了问题。它似乎没有更新它们。

这是我的代码：http://codepen.io/anon/pen/rVBaZV?editors=101

var endPathData = 'M740,342.9c-32,...etc...';
var endPath = new Path(endPathData);
endPath.fillColor = '#4CC7A4';

beginPathData = 'M762.8,262.8c-48,...etc...';
var beginPath = new Path(beginPathData);
beginPath.fillColor = '#FFC1D1';

var numberOfSegments = beginPath.segments.length;

for (var i = 0; i < numberOfSegments; i++) {
    var tween = new TWEEN.Tween(beginPath.segments[i].point)
        .to({
        x: endPath.segments[i].point.x,
        y: endPath.segments[i].point.y
    }, 3000)
        .easing(TWEEN.Easing.Linear.None)
        .start();
}

view.draw();

view.onFrame = function (event) {
    TWEEN.update();
};

我希望粉红色路径最终与绿色路径完全一样，但现在我卡住了。有什么办法可以实现吗？

Answer 1

你也需要补间手柄。每个段都有两个句柄：segment.handleIn 和 segment.handleOut

在您的示例代码中，您对 segment.point（段位置）进行补间，从而导致段的正确位置。

我不知道你的 Tween 库，所以你要实现它。但看起来你可以为

添加更多新的补间动画

beginPath.segments[i].handleIn

还有一个给

beginPath.segments[i].handleOut

您可以通过让 paperjs 平滑您的路径并处理句柄来轻松检查您的代码是否正确。通过像这样更新 onFrame 函数：

view.onFrame = function (event) {
    TWEEN.update();
    beginPath.smooth();
    endPath.smooth();
};

这导致相同形状的路径。

动画 Paper.js 路径段和句柄信息

Animating Paper.js path segments & handle info

javascript

paperjs