我正在尝试使用 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();
};
我希望粉红色的路径最终与绿色的路径完全一样,但现在我被卡住了。有办法实现这个目标吗?
最佳答案
您还需要调整 handle 。 每个段有两个句柄: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();
};
这会产生相同形状的路径。
关于javascript - 动画 Paper.js 路径段和句柄信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29689570/