我正在尝试使用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();
};
我希望粉红色的路径与绿色的路径完全一样，但是现在我被卡住了。反正有实现这个目标的方法吗？
您也需要补间手柄。每个段都有两个句柄：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();
};
这导致了相同形状的路径。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句