Paper.js pathData动画onFrame和onMouseDrag

时间:2016-04-22 10:41:02

标签: javascript html5 animation canvas paperjs

我使用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 ^^

任何paperJs专家请帮助我实现它。我们将不胜感激,谢谢。

1 个答案:

答案 0 :(得分:1)

首先,波浪效应的问题。您只能沿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个数据集:

  1. 您的原始行路径,用作所有转换的基础。
  2. 通过鼠标拖动操作的线路径。
  3. 您要渲染的直线路径。
  4. onMouseDrag处理程序中,您将转换集合2。

    onFrame处理程序中,您将应用已经在第2组上的正弦波变换并生成第3组。此外,您将在集合1中的当前位置和原始位置之间插入所有段。 / p>

    您可以应用非常常见的elasticOut equation,或查看与other春季相关的实施。