PaperJS - Как двигаться по траектории и вращаться по траектории - PullRequest
Новая
       31

PaperJS - Как двигаться по траектории и вращаться по траектории

1 голос
/ 19 июня 2019

Примеры, показанные в здесь , показывают, как перемещать объект по пути в Paperjs, но как правильно их повернуть по пути?

В примерах, показанных по ссылке выше, люди предложили использовать круг в качестве примера. Но как только вы перейдете в реактивный прямоугольник new Path.Rectangle(new Point(20,20), new Size(20,20));, вы увидите, что он движется вдоль пути, но фактически не вращается в направлении пути.

Как рассчитать поворот и установить его для моего объекта?

1 Ответ

2 голосов
/ 19 июня 2019

Чтобы вычислить вращение, вам нужно знать касательный вектор к траектории в позиции вашего прямоугольника.
Это можно получить с помощью path.getTangentAt (offset) метода.
Тогда простой способ анимировать вращение элемента - установить item.applyMatrix в false, а затем анимировать свойство item.rotation в каждом кадре.

Вот эскиз демонстрирует решение. 

// Create the rectangle to animate along the path.
// Note that matrix is not applied, this will allow us to easily animate its
// rotation.
var rectangle = new Path.Rectangle({
    point: view.center,
    size: new Size(100, 200),
    strokeColor: 'orange',
    applyMatrix: false
});

// Create the path along which the rectangle will be animated.
var path = new Path.Circle({
    center: view.center,
    radius: 250,
    strokeColor: 'blue'
});

// On each frame...
function onFrame(event) {
    // ...calculate the time of the animation between 0 and 1... 
    var slowness = 400;
    var time = event.count % slowness / slowness;
    // ...and move the rectangle.
    updateRectangle(time);
}

function updateRectangle(time) {
    // Calculate the offset relatively to the path length.
    var offset = time * path.length;
    // Get point to position the rectangle.
    var point = path.getPointAt(offset);
    // Get tangent vector at this point.
    var tangent = path.getTangentAt(offset);
    // Move rectangle.
    rectangle.position = point;
    // Rotate rectangle.
    rectangle.rotation = tangent.angle;
}
...