如何跟踪使用 Zepto 制作动画的图像的位置？答案

【问题标题】：How can you track the location of an image animated with Zepto?如何跟踪使用 Zepto 制作动画的图像的位置？
【发布时间】：2012-02-11 14:20:13
【问题描述】：

我目前正在尝试使用 Zepto .anim() 方法在我的页面上跟踪图像的 x 和 y 位置。问题是我用来尝试找到这些的任何方法都只返回它最初加载的位置，而不是它现在的位置。我可以通过在需要时计算它的位置来解决这个问题，但是这种方法有点不可靠。有谁知道一个简单的方法来做到这一点？

编辑：根据要求：

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

【问题讨论】：

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

标签： javascript zepto

【解决方案1】：

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

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

如果您访问 $('#circle').css('webkitTransform')，您将看到 translateX(somevalue) translateY(somevalue)，其中的值是您在 JavaScript 中传递的值。

很遗憾，这是最终值，而不是中间值。对于中间值，你需要这样的东西：

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

这些值存储在转换矩阵中。根据传递的内容，它可以是matrix 或matrix3d。 See my answer to another SO question on how to extract X and Y values from this string.

显然，这是很多工作，您需要为移动 Firefox 等添加更多逻辑。您可能需要考虑您正在尝试什么，看看是否有替代方法。

【讨论】：

你认为我目前的方法（根据经过的时间、速度和开始/结束位置计算它的位置）是更好的方法吗？
可能，但如果你想改变运动曲线，它就不会那么可靠而且会很脆弱。如果您不希望从使用转换中获得性能提升，您可以使用position:relative 并使用top: newY, left: newX 定位元素。那么像 Feni 的方法就可以了。
嗯，它是纯线性运动，没有曲线。另外，我有点需要性能提升。

【解决方案2】：

代码来自：Retrieve the position (X,Y) of an HTML element

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

您可以使用它来准确获取页面上元素的当前位置。

【讨论】：

我试过了，但它不适用于 Zepto。它只返回 0,0，即圆的起点。
这是因为当您执行转换时，浏览器仍然认为元素在文档中的原始位置。