javascript - 使用 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