javascript - paper.js 在图形上设置动画点

Question

我正在尝试使用 paper.js 构建一个可以对不同输入使用react的动画图。所以我想平滑地将一个点垂直移动到另一个点。

我看过不同的例子，最接近我的是这个:

paper.tool.onMouseDown = function(event) {
x = event.event.offsetX;
y = event.event.offsetY;
paper.view.attach('frame', moveSeg);
}

var x;
var y;
function moveSeg(event) {
    event.count = 1;
    if(event.count <= 100) {
        myPath.firstSegment.point._x += (x / 100);
        myPath.firstSegment.point._y += (y / 100);
        for (var i = 0; i < points - 1; i++) {
            var segment = myPath.segments[i];
            var nextSegment = segment.next;
            var vector = new paper.Point(segment.point.x - nextSegment.point.x,segment.point.y - nextSegment.point.y);
            vector.length = length;
            nextSegment.point = new paper.Point(segment.point.x - vector.x,segment.point.y - vector.y);
        }
    myPath.smooth();
   }
}

此代码将一个点动画化到点击位置，但我无法根据需要更改它。

我需要的是:

var aim = [120, 100];

var target = aim;

// how many frames does it take to reach a target
var steps = 200;

// Segment I want to move
myPath.segments[3].point.x

然后我不知道如何编写产生流畅动画的循环。

图表示例:

Answer 1

我想出了答案。 paperscript 中的以下步骤:

• 生成路径
• 设定目标
• OnFrame 执行移动(缓和)的事件

要获得更多动画，只需更改 currentAim 变量即可。

var myPath = new Path({
segments: [[0,100],[50,100],[100,100]]});

// styling
myPath.strokeColor = '#c4c4c4'; // red
myPath.strokeWidth = 8;
myPath.strokeJoin = 'round';
myPath.smooth();

// where the middle dot should go
var currentAim = [100,100];

// Speed
var steps = 10;

//Animation

function onFrame(event) {

dX1 = (currentAim[0] - myPath.segments[1].point.x )/steps;
dY1 = (currentAim[1] - myPath.segments[1].point.y )/steps;
myPath.segments[1].point.x += dX1;
myPath.segments[1].point.y += dY1;
}