我已经使用pathData方法[demo]创建了一行。我希望该线在onFrame函数中为小波浪效果设置动画。同样，当使用onMouseDrag功能时，该线将是橡皮筋效果，当使用onMouseUp功能时，该线将恢复为原始形状。我是Paper.js中的新手，因此当我编写一些代码时，动画会丢失对象形状。检查以下代码
代码已更新
var amount = 55;
var center = view.center;
function onFrame(event) {
// Loop through the segments of the path:
for (var i = 0; i <= amount; i++) {
var path = linePath;
var segment = path.segments[i];
// A cylic value between -1 and 1
var sinus = Math.sin(event.time * 3 + i);
// Change the y position of the segment point:
segment.point.y = sinus * 1 + center.y;
}
}
function onMouseDrag(event) {
var location = linePath.getNearestLocation(event.point);
var segment = location.segment;
var point = segment.point;
if (!point.fixed && location.distance < 600 / 4) {
var y = event.point.y;
point.y += (y - point.y) / 6;
if (segment.previous && !segment.previous.fixed) {
var previous = segment.previous.point;
previous.y += (y - previous.y) / 24;
}
if (segment.next && !segment.next.fixed) {
var next = segment.next.point;
next.y += (y - next.y) / 24;
}
}
}
Live demo ^^
任何论文专家都可以帮助我实现这一目标。帮助将不胜感激，在此先感谢。
最佳答案
首先，波浪效应的问题。您仅沿Y轴进行变换。可能是您想要的，但我假设不是。
通常，如果沿线的normal vector变换线，效果会好很多。法线将是垂直于线方向的方向。因此，当您进行变换时，似乎波沿线本身行进。
在2D中计算法线很容易，因为您只需要在单个平面上反映当前方向即可。
var deltaX = nextSegment.point.x - segment.point.x;
var deltaY = nextSegment.point.y - segment.point.y;
var length = Math.sqrt( deltaX * deltaX + deltaY * deltaY );
var normal = [ deltaX / length, deltaY / length ];
normal = [ normal[ 1 ], -normal[ 0 ] ];
现在，我们可以使用该法线来变换线：
toManipulate.point.x = segment.point.x + normal[0] * sinus * 3;
toManipulate.point.y = segment.point.y + normal[1] * sinus * 3;
您可以在my fork of your fiddle中进行查看。
另一个关键方面是，您不想转换原始数据。这就是为什么我创建另一个副本的原因：
var linePathCached = new Path(dataLine);
var linePath = new Path(dataLine);
您将始终需要原始数据的副本，以便可以操纵副本并将旧数据用于下一帧的新转换。
现在，第二，您的橡皮筋效果。
您已经非常接近当前代码。但是，同样，您正在转换原始数据，这没有帮助。
为此，我建议您创建原始数据的第二个副本，将您带到3个数据集：
原始线路径，将其用作所有转换的基础。
通过用鼠标拖动来操纵的线路径。
您要渲染的线路径。
在
onMouseDrag处理程序中，您将转换集合2。在您的
onFrame处理程序中，您将对集合2应用已经存在的正弦波变换并产生集合3。此外，您将在它们的当前位置和它们在集合1中的原始位置之间进行插值。您可以应用非常常见的elasticOut equation，或研究与弹簧相关的other实现。