使用Paper.js对圆上的多边形点进行动画处理

Question

我需要设置多边形的点（在Paper.js中称为线段）的动画，并将其旋转到以原始多边形点为原点的圆上。参见下图：

我正在尝试使用以下代码：

// Draw the polygon
var polygon = new Path.RegularPolygon({
    center: [100, 100],
    sides: 8,
    radius: 80,
});
// Animate
view.onFrame = function (event) {
    var offset = new Point(Math.cos(event.time*2), Math.sin(event.time*2));
    polygon.firstSegment.point = polygon.firstSegment.point.add(offset);
};

但是我遇到两个问题：

• 圆的原点不对
• 经过一段时间的动画处理后，它开始以某种奇怪的（显然）随机的方式旋转。似乎改变了圆的原点

这里有完整的代码可以看到它的作用：

https://codepen.io/anon/pen/xezQpb

有人可以帮忙吗？谢谢

Answer 1

问题在于，在每一帧中，您都指的是在上一帧期间移动了一点的第一段的位置，因此偏移量相加。

相反，只需在起点处记录中心并​​从该点开始偏移：

var center = polygon.firstSegment.point.clone();
[...]
polygon.firstSegment.point = center.add(offset);

https://codepen.io/anon/pen/YMjWBZ