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

使用 Paper.js 为圆上的多边形点设置动画

Animate polygon point on a circle with Paper.js

javascript

animation

paperjs