如何在anime.js中沿运动路径获取点

Question

我正在使用anime.js沿着SVG路径制作动画。

我从here复制了示例，一切正常。

我希望能够一次获取所有沿补间路径的x点和y点（即在脚本的初始位置，而不是补间时的一个），以便制作静态形状，但是我不知道不知道从哪里开始。我看过source code，但不确定是否有可用的功能。

我知道根据补间的持续时间会有更多或更少的点。使用标准补间，比如说从0到250的移动，我可以想象我怎么能在from和the to之间进行计数，但是由于路径不只是增加，而是上升和下降，所以我不知道我会怎么做要点。

如果这个问题不清楚，我们深表歉意，希望我已经阐明了我的想法，但是如果您需要更多信息来提出建议，请询问。

谢谢

Answer 1

<path>元素具有几种应该有用的方法。

• getPointAtLength(length) 获取沿路径的点length的X，Y坐标
• 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);