Как получить очки по траектории движения в anime.js

Question

Я делаю анимацию по пути SVG с anime.js.

Я скопировал пример отсюда, и все работает нормально.

Я хотел бы иметь возможность получить все точки x и y вдоль анимационного пути, сразу (т.е. при инициализации моего сценария, а не по одному, так как он используется для анимации) для создания статичной фигуры, но я не знаю с чего начать Я посмотрел на исходный код, но не уверен, есть ли функция для этого.

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

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

Спасибо

Answer 1

<path> У элементов есть пара методов, которые вы должны найти полезными.

• getPointAtLength(length)Получает координаты X,Y точки length вдоль пути
• getTotalLength()Получает общую длину пути

Пример типичного использования:

var  mypath = document.getElementById("mypath");
var  pathLength = mypath.getTotalLength();
var  pt = mypath.getPointAtLength(pathLength / 2);  // halfway along the path
console.log("x="+pt.x+" y="+pt.y);