Как можно отследить местоположение изображения, анимированного с помощью Zepto?

В настоящее время я пытаюсь отследить координаты x и y изображения на моей странице, анимированного с помощью метода Zepto .anim(). Проблема в том, что любые методы, которые я использую, чтобы найти их, возвращают только то место, где оно было изначально загружено, а не то, в котором оно находится сейчас. Я могу обойти это, вычисляя, где он находится, когда мне это нужно, но этот метод немного ненадежен. Кто-нибудь знает простой способ сделать это?

Изменить: по запросу:

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

javascript zepto
person CSturgess    schedule 16.01.2012    source источник
comment
Можете ли вы предоставить больше контекста? Какие свойства вы передаете anim?   -  person Brian Nickel♦    schedule 16.01.2012

Ответы (2)


arrow_upward
3
arrow_downward

Это будет немного сложно, потому что вы используете преобразования 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 в зависимости от того, что было передано. См. мой ответ на другой вопрос SO о том, как извлечь значения X и Y из эта строка.

Очевидно, что это большая работа, и вам нужно будет добавить больше логики для мобильного Firefox и тому подобного. Возможно, вы захотите подумать о том, что вы пытаетесь сделать, и посмотреть, есть ли альтернативный подход.

person Brian Nickel♦    schedule 16.01.2012
comment
Считаете ли вы, что мой текущий метод (вычисление того, где он основан на прошедшем времени, скорости и начальном/конечном местоположении) является лучшим способом? - person CSturgess; 16.01.2012
comment
Возможно, но это было бы не так надежно и было бы очень хрупким, если бы вы захотели изменить кривую движения. Если вы не ищете повышения производительности от использования преобразований, вы можете использовать position:relative и расположить элементы с помощью top: newY, left: newX. Тогда сработает метод, подобный методу Фени. - person Brian Nickel♦; 16.01.2012
comment
Ну, это чисто линейное движение, никаких кривых. Кроме того, мне нужен прирост производительности. - person CSturgess; 16.01.2012

arrow_upward
2
arrow_downward

Код из: Получить позицию (X,Y) элемента HTML< /а>

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;

Вы можете использовать его, чтобы точно получить текущую позицию элемента на странице.

person Feni    schedule 16.01.2012
comment
Я пробовал это, и это не работает с Zepto. Он просто возвращает 0,0, откуда начинается круг. - person CSturgess; 16.01.2012
comment
Это связано с тем, что браузер по-прежнему считает, что элемент находится на своем исходном месте в документе, когда вы выполняете преобразование. - person Brian Nickel♦; 16.01.2012