Блог

Мне нужно анимировать точку (называемую сегментом в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

Кто-нибудь может помочь? Спасибо

Проблема в том, что в каждом кадре вы ссылаетесь на положение первого сегмента, который немного переместился во время предыдущего кадра, поэтому смещение суммируется.

Вместо этого просто запишите центр в начале и смещение от этой точки :

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

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