如何跟踪Zepto动画图像的位置？

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

编辑：要求：

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

来源

2012-01-16 CSturgess

你能提供更多的上下文吗？你传递给'anim'的属性是什么？ – 2012-01-16 16:59:42

这将会有点复杂，因为您正在使用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等添加更多逻辑。您可能想要考虑您尝试的是什么，并查看是否有其他方法。

来源

2012-01-16 17:47:05

您是否认为我现在的方法（计算基于时间，速度和开始/结束位置的方法）是一种更好的方法？ – CSturgess 2012-01-16 18:29:32

可能，但它不会如可靠，如果你想改变运动曲线，它会变得非常脆弱。如果您没有使用转换来查找性能增益，那么可以使用'position：relative'并将元素放在'top：newY，left：newX'中。然后像Feni这样的方法可以工作。 – 2012-01-16 19:11:04

嗯，它是纯粹的线性运动，没有曲线。另外，我需要提高性能。 – CSturgess 2012-01-16 19:18:16

代码来自：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;

你可以用它来准确地获取网页上的元素的当前位置。

来源

2012-01-16 17:05:29 Feni

我试过了，它不适用于Zepto。它只是返回0,0，圆圈起源于此。 – CSturgess 2012-01-16 17:19:06

这是因为浏览器在执行转换时仍然认为元素位于文档的原始位置。 – 2012-01-16 19:04:12

如何跟踪Zepto动画图像的位置？

回答

相关问题