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

【问题标题】：Animate polygon point on a circle with Paper.js使用 Paper.js 为圆上的多边形点设置动画
【发布时间】：2019-04-22 16:41:42
【问题描述】：

我需要对多边形的一个点（在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

有人可以帮忙吗？谢谢

【问题讨论】：

标签： javascript animation paperjs

【解决方案1】：

问题在于，在每一帧中，您都参考在前一帧中移动了一点的第一段的位置，因此偏移量相加。

相反，只需记录开始的中心并从该点偏移：

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

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

【讨论】：