Как получить очки по траектории движения в 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);