我目前正在尝试跟踪我页面上使用 Zepto .anim() 方法制作动画的图像的 x 和 y 位置。问题是我用来尝试找到这些的任何方法都只返回它最初加载的位置,而不是它现在所在的位置。我可以通过在需要时计算它的位置来解决这个问题,但这种方法有点不可靠。有谁知道执行此操作的简单方法?
编辑:按要求:
$('#circle').anim({translateX: newX + 'px', translateY: newY + 'px'}, speed, 'linear')
最佳答案
这会有点复杂,因为您正在使用 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 等添加更多逻辑。您可能需要考虑您正在尝试的是什么,看看是否有替代方法。
关于javascript - 如何跟踪使用 Zepto 制作动画的图像的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8883452/