Javascript 如何跟踪使用Zepto设置动画的图像的位置？

我目前正在尝试跟踪页面上使用Zepto.anim（）方法制作动画的图像的x和y位置。问题是，我使用的任何方法都只返回它最初加载的位置，而不是它现在所在的位置。我可以在需要的时候通过计算它的位置来解决这个问题，但是这个方法有点不可靠。有人知道一个简单的方法吗

编辑：根据要求：

$('#circle').anim({translateX: newX + 'px', translateY: newY + 'px'}, speed, 'linear')

代码来源：

您可以使用它精确地获取元素在页面上的当前位置

代码来自：

---

您可以使用它精确地获取元素在页面上的当前位置

这将有点复杂，因为您使用的是CSS3转换，并且实际上没有公开任何用于检索此信息的ZeptoAPI

首先，您必须了解信息存储的位置。假设您使用的是Android、iPhone、Safari或Chrome，这是

WebKittTransform

属性

如果访问

$（'#circle'）.css（'webkitTransform'）

，您将看到

translateX（somevalue）translateY（somevalue）

，其中的值是您在JavaScript中传递的值

不幸的是，这是最终值，而不是中间值。对于中间值，您将需要如下内容：

getComputedStyle($('#circle')[0]).webkitTransform
// == "matrix(1, 0, 0, 1, 87.66703796386719, 82.89203643798828)"

这些值存储在变换矩阵中。根据传递的内容，它可以是

矩阵

或

矩阵x3d

---

显然，这需要做大量的工作，您需要为移动Firefox等添加更多的逻辑。你可能想考虑你正在尝试什么，看看是否有其他的方法。

< P>这将有点复杂，因为你正在使用CSS3转换，并且没有任何ZePTO API被暴露用于检索这个信息。 首先，您必须了解信息存储的位置。假设您使用的是Android、iPhone、Safari或Chrome，这是

WebKittTransform

属性

如果访问

$（'#circle'）.css（'webkitTransform'）

，您将看到

translateX（somevalue）translateY（somevalue）

，其中的值是您在JavaScript中传递的值

不幸的是，这是最终值，而不是中间值。对于中间值，您将需要如下内容：

getComputedStyle($('#circle')[0]).webkitTransform
// == "matrix(1, 0, 0, 1, 87.66703796386719, 82.89203643798828)"

这些值存储在变换矩阵中。根据传递的内容，它可以是

矩阵

或

矩阵x3d

---

显然，这需要做大量的工作，您需要为移动Firefox等添加更多的逻辑。你可能想考虑你正在尝试什么，看看是否有其他的方法。

你能提供更多的上下文吗？您要将哪些属性传递给

anim

？能否提供更多上下文？您要将哪些属性传递给

anim

？我试过了，但Zepto不起作用。它只返回0,0，圆圈的起始位置。这是因为当您执行转换时，浏览器仍然认为元素位于文档中的原始位置。我尝试过了，但Zepto无法使用。它只返回0,0，圆圈的起始位置。这是因为当您执行转换时，浏览器仍然认为元素位于文档中的原始位置。您认为我当前的方法（根据经过的时间、速度和开始/结束位置计算位置）是更好的方法吗？可能，但是如果你想改变运动曲线，它就不会那么可靠，而且会非常脆弱。如果您不想从使用转换中获得性能增益，那么可以使用

position:relative

并使用

top:newY，left:newX

定位元素。然后像Feni这样的方法就行了，它是纯线性运动，没有曲线。此外，我还需要性能提升。你认为我目前的方法（根据经过的时间、速度和开始/结束位置计算它的位置）是更好的方法吗？可能吧，但如果你想改变运动曲线，它就不那么可靠，而且非常脆弱。如果您不想从使用转换中获得性能增益，那么可以使用

position:relative

并使用

top:newY，left:newX

定位元素。然后像Feni这样的方法就行了，它是纯线性运动，没有曲线。此外，我还需要性能提升。