如何跟蹤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動畫圖像的位置？

回答

相關問題