Мне нужно разработать 2 анимации на многоугольнике:
- автоматическое вращение каждого сегмента
- многоугольник следует за движениями мыши
I 'Я пытаюсь сделать это с помощью этого кода:
// onMouseMove
tool.onMouseMove = function (event) {
mousePoint = event.point;
};
// onFrame
view.onFrame = function (event) {
// Animation 1: Automatic circular rotation of each segment
for (var i = 0; i < polygon.segments.length; i++) {
var offsetRotation = new Point(Math.cos(event.time + i * 2), Math.sin(event.time + i * 2)).multiply(10);
polygon.segments[i].point = polygonCached.segments[i].point.add(offsetRotation);
}
// Animation 2: the polygon moves following the mouse movements with transition
var delta = mousePoint.subtract(polygon.position).divide(15);
polygon.position = polygon.position.add(delta);
};
Вот весь код: https://codepen.io/anon/pen/YMgEEe?editors=0010
При использовании приведенного выше кода автоматическое вращение каждого сегмента работает, а многоугольник - нетследовать за мышью, а также без перехода.Вместо этого, комментируя анимацию автоматического поворота, она правильно следует за мышью с переходом.
Чтобы проверить, работает ли переход, я перемещаю курсор мыши за пределы окна браузера и затем возвращаюсь из другой точки.Теперь вы не увидите перехода при перемещении многоугольника.
Где я ошибаюсь?