时间戳

首页 > 解决方案 > 如何在anime.js中沿运动路径获取点

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

问题描述

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

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

我希望能够一次获得补间路径上的所有 x 和 y 点（即在我的脚本的初始化，而不是一个补间）用于制作静态形状，但我不知道从哪里开始。我查看了源代码，但不确定是否有可用的功能。

我知道根据补间的持续时间会有或多或少的分数。使用标准补间，例如从 0 到 250 移动，我可以想象如何在 from 和 to 之间进行计数，但是因为路径不是简单地递增，而是上升和下降，我不知道我会去获取点。

抱歉，如果这个问题不清楚，我希望我已经阐明了我所追求的，但如果您需要更多信息来提供建议，请询问。

谢谢

标签： javascriptsvganime.js

解决方案

<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);

推荐阅读