Анимированная точка многоугольника на окружности с Paper.js - PullRequest
0 голосов
/ 21 апреля 2019

Мне нужно анимировать точку (называемую сегментом в Paper.js ) многоугольника, поворачивая ее по кругу с началом в исходной точке многоугольника. Смотрите изображение ниже:

enter image description here

Я пытаюсь сделать это с помощью этого кода:

// 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

Может кто-то поможет? Спасибо

1 Ответ

1 голос
/ 22 апреля 2019

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

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

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

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

...