Animation 使用paper.js设置点的动画

我想在paper.js中重建这个动画

我已经尝试过SVG动画（），但是尽管它们很快就会被弃用，我还是无法异步移动这两点

到目前为止，我掌握的是形状，我知道我可以使用

onFrame

事件处理程序设置动画。但是我不知道如何说点应该在坐标

[43168.7]

和

[43,35.3]

之间进行动画

---

您所犯的错误是试图将处理程序绑定到

段.onFrame

事件。
但只有和可用。
在

PaperScript

上下文中，您甚至可以使用全局

onframe

命名函数作为动画制作的便捷方式。
下面是一个简单的示例，演示如何为路径段设置动画

// create a triangle
var triangle = new Path.RegularPolygon({
    center: view.center,
    sides: 3,
    radius: 50,
    fillColor: 'orange'
});

// store initial first point position
var initialPoint = triangle.firstSegment.point.clone();

// on frame
function onFrame(event) {
    // use sine function as a convenient way to demonstrate animation
    var newPoint = initialPoint + Math.sin(event.count * 0.05) * 30;
    // update first point
    triangle.firstSegment.point = newPoint;
}

// create a triangle
var triangle = new Path.RegularPolygon({
    center: view.center,
    sides: 3,
    radius: 50,
    fillColor: 'orange'
});

// store initial first point position
var initialPoint = triangle.firstSegment.point.clone();

// on frame
function onFrame(event) {
    // use sine function as a convenient way to demonstrate animation
    var newPoint = initialPoint + Math.sin(event.count * 0.05) * 30;
    // update first point
    triangle.firstSegment.point = newPoint;
}