paper.js图上的动画点

Question

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

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

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

我找到了答案。论文中的以下步骤：

• 生成路径
• 设定目标点
• 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;
}